两个div并排在包装内
我试着将两个div并排放置，两个div之间的间距为20px。div在包装内，宽度为800px。左div是250px，右div是550px，但当然，如果我在它们之间加上20px的边距，总宽度将增加到800px以上。有没有办法强制右div宽度为550px-20px的余量？
CSS
.wrapper {
max-width: 800px;
height: 400px;
background-color: green;
margin: 0 auto;
}
.left {
width: 250px;
height: 300px;
background-color: blue;
float: left;
margin-right: 20px;
}
.right {
width: 550px;
height: 300px;
background-color: red;
float: left;
}
超文本标记语言
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
我的意思是我必须手动减小宽度还是有更好的解决方案？
jsfiddle：https://jsfiddle.net/ytsvd77f/
共有2个答案
如果您在包装器中添加display:flex，它将完美地工作，我想您会理解得更好。查看css。
.wrapper {
max-width: 800px;
height: 400px;
background-color: green;
margin: 0 auto;
display: flex;
}
是的，您可以使用calc（550px-20px）作为右分区的width。
css lang-css prettyprint-override">.wrapper {
max-width: 800px;
height: 400px;
background-color: green;
margin: 0 auto;
}
.left {
width: 250px;
height: 300px;
background-color: blue;
float: left;
margin-right: 20px;
}
.right {
width: -moz-calc(550px - 20px);
width: -webkit-calc(550px - 20px);
width: -o-calc(550px - 20px);
width: calc(550px - 20px);
height: 300px;
background-color: red;
float: left;
}
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>-
问题内容： 我有一个小问题。我正在尝试使用CSS并排对齐两个div，但是，我希望将中心div放置在页面的水平中央，我通过使用以下方法实现了这一点： 很好 我想将第二个div放置在中心页面换行的左侧，但是尽管可以确定，但我无法使用浮点数来完成此操作。 我想将红色div推向白色div。 这是我当前关于这两个div的CSS，侧边栏是红色div，页面换行是白色div： 问题答案： 如果包裹了div，如下所
-
问题内容： 我试图并排放置两个div，并使用以下CSS。 HTML很简单，在包装div中有两个左和右div。 我已经尝试了很多次，也在StackOverflow和其他站点上寻找更好的方法，但是找不到确切的帮助。 因此，代码乍一看效果很好。问题是，当我增加（％）的宽度时，左div自动获得填充/边距。因此，在65％的宽度处，左div有一些填充或边距，并且与右div并不完全对齐，我尝试填充/边距0但没有
-
问题内容： 我有两个未嵌套的div，一个在另一个之下。它们都在一个父div内，并且该父div重复其自身。所以本质上： 我想每对以及彼此相邻。我怎样才能做到这一点？ 问题答案：
-
问题内容： 我想并排放置两个DIV标签而不使用固定宽度。第一个div扩展到其内容，第二个div应该填充剩余的空间。另外，div不能位于另一个div的顶部，因为它们具有透明的背景图像，因此如果它们相交，则很明显。我尝试了所有可以考虑的可能性，但是找不到使用DIV标签的解决方案。 我可以使用TABLE进行此操作，但是可以使用DIV进行吗？还是DIV不能再做的一件事？ 这是代码： 感谢您的答复！ 问题答
-
我想有一个头像图像，右边有两个垂直对齐的div。 https://jsbin.com/qafiroquve/1/edit?html，css，输出 我读过很多关于这方面的帖子，但似乎没有一篇对我有帮助。 将图像放在左侧的30%主div（）宽度和div的70%宽度的最佳方法是什么？ 如果div（或）中的任何一个有太多文本，我希望div与其左侧的图像垂直对齐。我还希望这个div与图像有一个边距。 我尝试
-
问题内容： 我有两个div并排。我希望它们的高度相同，并且如果其中之一调整大小，则保持不变。我无法弄清楚这一点。有想法吗？ 为了澄清我的困惑问题，我希望两个框的尺寸始终相同，因此如果一个框由于文本放置而增大，则另一个框应与高度匹配。 问题答案： flexbox 使用flexbox时，它是一个声明：