两个div并排-流体显示

我试图把两个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工作完美，它的流体显示和固定，抱歉问了错误的问题…

789264 次浏览
小开

试试这样的系统:

.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，如果你使用margin-left在另一个等于第一个div的宽度。这将工作，无论什么变焦，将不会有亚像素的问题。

小开
最佳答案

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

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

这对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>

小开

以下是我对那些在谷歌上搜索的人的回答:

CSS:

.column {
float: left;
width: 50%;
}


/* Clear floats after the columns */
.container:after {
content: "";
display: table;
clear: both;
}

下面是HTML:

<div class="container">
<div class="column"></div>
<div class="column"></div>
</div>
小开

让两个div都像这样。这将使两个div并排对齐。

.my-class {
display : inline-flex;
}
小开 

<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>

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

小开 

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 
<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->

小开

你也可以使用网格视图，它也是响应式的，就像这样:

#wrapper {
width: auto;
height: auto;
box-sizing: border-box;
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(6, 1fr);
}


#left{
text-align: left;
grid-column: 1/4;
}


#right {
text-align: right;
grid-column: 4/6;
}

HTML应该是这样的:

<div id="wrapper">
<div id="left" > ...some awesome stuff </div>
<div id="right" > ...some awesome stuff </div>
</div>

这里是更多信息的链接:

https://www.w3schools.com/css/css_rwd_grid.asp

我很新，但我想我可以分享我的小经验

小开 

#wrapper{
display: grid;
grid-template-columns: 65% 1fr;
}
#left {
grid-column:1;
overflow: hidden;
border: 2px red solid;
}


#right {
grid-column:2;
overflow: hidden;
border: 2px blue solid;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>


提交答案