我试图把两个div并排放在一起,并使用下面的CSS。
#left {
float: left;
width: 65%;
overflow: hidden;
}
#right {
overflow: hidden;
}
HTML很简单,在一个包装器div中有两个左div和右div。
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
我也试过很多次在StackOverflow和其他网站上搜索更好的方法,但都找不到确切的帮助。
因此,代码初看起来运行良好。问题是,当我增加width in (%)时,左边的div会自动得到填充/边距。因此,在65%宽度时,左边的div有一些填充或边距,并且与右边的div不完全对齐,我尝试填充/边距为0,但没有成功。其次,如果我放大页面,右边的div会滑到左边的div下面,这就像不是流体显示。
注:很抱歉,我已经搜索了很多。这个问题已经被问了很多次了,但这些答案对我没有帮助。我已经解释了我的问题所在。
我希望有办法解决这个问题。
谢谢。
编辑:对不起,我的HTML问题,左边和右边都有两个"box“div,他们有%的填充,所以左边显示了更多的填充,因为更大的宽度。抱歉,上面的CSS效果很好,它的流畅显示和修复,很抱歉问错了问题…
发布于 2013-08-14 01:08:01
将此CSS用于我当前的站点。它工作得很完美!
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
发布于 2013-06-20 23:40:03
试一下这样的系统:
.container {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
.one {
width: 15%;
height: 200px;
background: red;
float: left;
}
.two {
margin-left: 15%;
height: 200px;
background: black;
}
<section class="container">
<div class="one"></div>
<div class="two"></div>
</section>
你只需要浮动一个div,如果你在另一个div上使用width left等于第一个div的宽度。这将工作,无论什么缩放,将不会有亚像素问题。
发布于 2015-12-28 09:11:09
使用flexbox很容易做到这一点:
#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
}
#right {
flex: 1;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
https://stackoverflow.com/questions/17217766
复制相似问题