css减去另外一个容器的宽度
时间: 2023-08-04 11:39:49 浏览: 45
可以使用CSS的calc()函数来计算两个容器的宽度差。例如,假设你有两个容器分别为div1和div2,可以使用以下代码将div2的宽度设置为div1的宽度减去100像素:
```
div2 {
width: calc(100% - 100px);
}
```
其中,100%表示div2的宽度与父容器相同,而100px则是要减去的宽度值。你可以根据具体需求修改这些值。
相关问题
css3 宽度百分比减去固定宽度 无效问题
可能是因为你设置了盒模型的不同属性导致的。CSS3中有两种盒模型:content-box和border-box。默认的是content-box,即元素的宽度只包括内容,不包括边框和内边距。如果你想要元素的宽度包括边框和内边距,可以将盒模型设置为border-box。例如:
```
box-sizing: border-box;
width: 50%;
padding: 10px;
border: 1px solid #000;
```
这样设置后,元素的宽度就是父容器宽度的50%减去10px的内边距和2px的边框宽度。如果你没有设置盒模型属性,可能会导致宽度计算错误。
css两行6个div布局自适应
可以使用Flex布局来实现:
HTML代码:
```
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
```
CSS代码:
```
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: calc(100% / 3 - 20px);
margin: 10px;
height: 100px;
background-color: #ccc;
}
```
解释:将包含6个box元素的容器设置为Flex布局,然后让box元素自动换行。通过给box元素设置宽度、外边距和高度来实现自适应布局。其中,calc()函数用于计算每个box元素的宽度,减去20px是为了给box元素之间留出一定的间隙。