HTML 和 CSS：左侧 2 个 DIVS，右侧 1 个独立 DIV答案

【问题标题】：HTML and CSS: 2 DIVS on left, 1 independent DIV on rightHTML 和 CSS：左侧 2 个 DIVS，右侧 1 个独立 DIV
【发布时间】：2022-02-05 05:17:03
【问题描述】：

我没有为我的这个具体案例找到答案，所以我决定提出一个新问题。我想在页面左侧（具有固定宽度）有 2 个 DIV，在右侧有一个 DIV，占据页面宽度的其余部分。此外，右侧的单个 DIV 应该有其独立的高度（当它的高度增加时，它不应该影响左侧 DIV 的高度或位置）。我想要的是这样的：

这是 HTML 代码：

<body>
    <div class="div1">Div1</div>
    <div class="div3">Div3</div>
    <div class="div2">Div2</div>
</body>

这是我现在拥有的 CSS：

div.div1 {
    float: left;
    height: 400px;
    margin-right: 10px;
    width: 200px;
}

div.div3 {
    height: 425px;
    overflow: hidden;
}

div.div2 {
    clear: left;
    float: left;
    height: 15px;
    margin-top: 10px;
}

唯一的问题是 Div2 的顶部位置受 Div3 的高度影响，我得到这样的结果：

【问题讨论】：

当同一“列”中有 2 个 div 时，我总是建议使用“父 div”

标签： css html position css-float

【解决方案1】：

试试这个：

<html>
<head>
<style>
    div.div1 {
        float: left;
        height: 400px;
        margin-right: 10px;
        width: 200px;
        background-color: blue;
    }
    div.div2 {
        clear: left;
        float: left;
        height: 15px;
        width: 200px;
        margin-top: 10px;
        background-color: red;
    }    
    div.div3 {
        height: 425px;
        overflow: hidden;
        background-color: green;
    }
</style>
</head>
<body>
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
    <div class="div3">Div3</div>
</body>
</html>

一旦我重新排序了 Div 并为 Div 2 添加了宽度，它就可以正常工作了

https://jsfiddle.net/6g7qx26b/

如果您将 css 高度属性替换为 min-height 属性，这也可以工作，从而获得更大的灵活性。宽度也可以用百分比指定

【讨论】：

【解决方案2】：

现在您可以使用具有溢出的正确内容：隐藏并且不与左侧 div 冲突。

检查这个： http://jsfiddle.net/6UyTr/1/

div.left-content { margin-right: 10px; overflow: hidden; width: 200px; float: left; }

【讨论】：

这个答案表明如果不更改标记是不可能的。有关适用于原始标记的方法，请参见下面的 @Timothy 答案。

【解决方案3】：

查看http://jsfiddle.net/cz2fP/

<div style="float:left;">
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>

将左边的 div 元素按另一个 div 元素分组。

【讨论】：

【解决方案4】：

div.div1 {
height: 400px;
margin-right: 10px;
width: 200px;
background: red;
float: left;
}
div.div3 {
height: 15px;
margin-top: 10px;
margin-right: 10px;
background: green;
clear: both;
width: 200px;

}
div.div2 {
   height: 425px;
overflow: hidden;
background: blue;
float: left;
width: 200px;
}

<div style="float:left;">
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
</div>

<div class="div3">Div3</div>

并查看此链接http://jsfiddle.net/bipin_kumar/cz2fP/3/

【讨论】：

【解决方案5】：

<style>
    div.left{
        float: left;
    }

    .main{
        width : 100%;
    }

   .clear{
        clear : both;
   }

    div.div1, div.div2 {
      margin-right: 10px;
      width: 200px;
      background: red;
   }

   div.div1 {
      height: 400px;
   }
</style>

<body>
    <div class="main">
        <div class="left">
            <div class="div1">Div1</div>
            <div class="div2">Div2</div>
        </div>  
        <div class="div3">Div3</div>
        <div class="clear"></div>
    </div>
</body>

http://jsfiddle.net/rkpatel/qd6Af/1/

【讨论】：

【解决方案6】：

我需要类似的东西，只是镜像（左 1 div，右 2 div），但我无法解决。几次谷歌搜索后，我发现了一个网站，它允许您轻松创建网格，将行/列数分配给不同命名的 div，它甚至为您提供 HTML/CSS 代码，只需复制和粘贴即可。我不知道这一点，浪费了一个小时尝试各种其他方式，所以如果你还不知道这个网站，here it is。

抱歉回复这么老的帖子，我只是想帮助大家。

【讨论】：

【解决方案7】：

试试这个

<body>
    <div class="left">
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
    </div>
    <div class="div3">Div3</div>

</body>

DEMO

【讨论】：

【解决方案8】：

  <div class="main">
    <div class="div1">
     <div class="div2"></div>
     <div class=="div3"></div>
    </div>
    <div class="div4"></div>
   </div>

在 css 中使用 min-height property

.div1 {
 float:left;
}
.div4 {
float:right;
}
.main {
min-height:200px;
}

【讨论】：