我试图把两个div并排,并使用下面的CSS为它。

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

HTML很简单,在包装器div中有两个左右div。

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

我已经尝试了很多次在StackOverflow和其他网站上寻找更好的方法,但找不到确切的帮助。

因此,乍一看,代码运行正常。问题是,当我在(%)中增加宽度时,左侧div自动获得padding/margin。所以,在65%的宽度,左边的div有一些填充或空白,并没有与右边的div完美对齐,我尝试填充/空白0,但没有运气。其次,如果我放大页面,右边的div会滑到左边的div下面,这就像不是流体显示。

注:对不起,我搜索了很多。这个问题已经被问过很多次了,但这些答案对我都没有帮助。我已经解释了我的问题所在。

我希望有办法解决这个问题。

谢谢你!

编辑:对不起,我的HTML问题,有两个“盒子”div在左边和右边,他们有填充在%,所以左边显示更多的填充,因为更大的宽度。抱歉,上面的CSS工作完美,它的流体显示和固定,抱歉问了错误的问题…


当前回答

#{两边 保证金:0; } #{离开 浮:左; 宽度:75%; 溢出:隐藏; } #{正确 浮:左; 宽度:25%; 溢出:隐藏; } <h1 id="left">左侧</h1> . > . > . > <h1 id="right">右边</h1> . </h1> . <!——有效!-->

其他回答

<div style="height:50rem; width:100%; margin: auto;"> <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div> <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div> <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div> <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div> </div>

不过,右边框是不需要的。

试试这样的系统:

.container { 宽度:80%; 身高:200 px; 背景:水; 保证金:汽车; 填充:10 px; } 。{ 宽度:15%; 身高:200 px; 背景:红色; 浮:左; } :({ margin-left: 15%; 身高:200 px; 背景:黑色; } <节课= "容器" > < div class = " 1 " > < / div > < div class = " 2 " > < / div > < / >节

你只需要浮动一个div,如果你使用margin-left在另一个等于第一个div的宽度。这将工作,无论什么变焦,将不会有亚像素的问题。

使用此CSS为我目前的网站。它工作得很完美!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

这对flexbox来说很简单:

#包装{ 显示:flex; } #{离开 Flex: 0 0 65%; } #{正确 flex: 1; } < div id = "包装" > <div id="left">左边div</div> <div id="right">右边div</div> < / div >

#包装{ 显示:网格; 网格-模板-列:65% 1fr; } #{离开 grid-column: 1; 溢出:隐藏; 边框:2px红色实体; } #{正确 grid-column: 2; 溢出:隐藏; 边框:2px蓝色实心; } < div id = "包装" > <div id="left">左边div</div> <div id="right">右边div</div> < / div >