css 两个div并排-流体显示

50pmv0ei 于 2023-05-02 发布在其他

关注(0)|答案(9)|浏览(113)

我试图将两个div并排放置，并使用以下CSS。

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

#right {
  overflow: hidden;
}

HTML很简单，两个左右div在一个 Package 器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有一些padding或margin，并且没有与右边的div完全对齐，我试图将padding/margin设置为0，但没有成功。其次，如果我放大页面，右边的div会滑到左边的div下面，就像不是流体显示一样。
答：不好意思，我找了很多。这个问题已经被问过很多次了，但这些答案对我没有帮助。我已经解释了我的问题是什么。
我希望有一个解决办法。
谢谢大家。
编辑：对不起，我的HTML问题，有两个“框”div在左侧和右侧，他们有填充%，所以左侧显示更多的填充，因为更大的宽度。对不起，上面的CSS工作完美，其流体显示和固定，对不起问错了问题...

css

来源：https://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display

9条答案

按热度按时间

dxpyg8gm1#

试试这样的系统：

.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，使其等于第一个div的宽度。这将工作，无论什么缩放，不会有子像素的问题。

赞(0）回复(0）举报 2023-05-02

imzjd6km2#

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

赞(0）回复(0）举报 2023-05-02

iecba09b3#

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

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

赞(0）回复(0）举报 2023-05-02

wvyml7n54#

以下是我对那些正在谷歌搜索的人的回答：
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>

赞(0）回复(0）举报 2023-05-02

gorkyyrv5#

两个div都是这样的。这将并排对齐两个div。

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

赞(0）回复(0）举报 2023-05-02

nxowjjhe6#

你也可以使用网格视图，它也是响应式的，类似于这样的东西：

#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
我是新来的，但我想我可以分享我的小经验

赞(0）回复(0）举报 2023-05-02

5cg8jx4n7#

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

赞(0）回复(0）举报 2023-05-02

dphi5xsq8#

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

赞(0）回复(0）举报 2023-05-02

bkhjykvo9#

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

然而，margin-right不是必需的。

赞(0）回复(0）举报 2023-05-02

我来回答

css 两个div并排-流体显示

9条答案

相关问题

热门标签

最新问答