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

当前回答

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

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>

2018-11-27 17:12:39

其他回答

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

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>

2018-11-27 17:12:39

这对flexbox来说很简单:

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

2015-12-28 01:11:09

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

2020-03-20 09:07:01

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

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

2013-08-13 17:08:01

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

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

2019-12-25 10:31:26

两个div并排-流体显示

推荐文章

最新文章

标签