div浮动的div布局：左

Question

如何制作这个html结构

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

显示为这样，而div＃1和＃2有css float：left

（id名称只是用于演示目的的整数）

Answer 1

首先，您需要更改id的{​​{1}}以字母开头，而不是仅仅一个数字，因为您赢了＆＃ 39;然后可以使用CSS设置<div>的样式。此外，为了实现您尝试创建的布局类型，您需要将两个浮动的<div>包裹在<div>内并设置{{1 <div>到display的属性。

这是一个演示：

＆＃13;

＆＃13;

<div>

＆＃13;

inline-block

＆＃13;

＆＃13;

＆＃13;

修改：如果您想将这三个框对齐到页面的右侧，则需要将HTML包装在另一个#one, #two { float: left; } #one { display: block; width: 200px; height: 200px; text-align: center; color: white; } #two { display: block; width: 200px; height: 200px; text-align: center; color: white; } #three { display: block; width: 200px; height: 200px; text-align: center; color: white; } #one { background: pink; } #two { background: brown; } #three { background: gray; } div#row-left { display: inline-block; width: 200px; overflow: hidden; vertical-align: top; } div#row-right { display: inline-block; width: 200px; vertical-align: top; }内并设置<div id="row-left"> <div id="one">One</div> <div id="two">Two</div> </div> <div id="row-right"> <div id="three">Three</div> </div> <div>到右边的属性，如下所示：

＆＃13;

＆＃13;

text-align

＆＃13;

<div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你想保留给定的HTML结构，这里有两种不同的方法。一个是在浮标周围工作，另一个是使用绝对或相对定位来强制第三个div到位。

HTML

<div id="d1">One</div>
<div id="d2">Two</div>
<div id="d3">Three</div>

CSS使用内联块（jsfiddle）：

div {
    width: 200px;
    height: 200px;
    margin: 10px;
}
#d1 {
    float: left;
    background-color: rgba(255,0,0,0.3);
}
#d2 {
    float: left;
    clear: left;
    background-color: rgba(0,255,0,0.3);
}
#d3 {
    background-color: rgba(0,0,255,0.3);
    display: inline-block;
}

使用相对定位的CSS（jsfiddle）：

div {
    width: 200px;
    height: 200px;
    margin: 10px;
}
#d1 {
    float: left;
    background-color: rgba(255,0,0,0.3);
}
#d2 {
    float: left;
    clear: left;
    background-color: rgba(0,255,0,0.3);
}
#d3 {
    background-color: rgba(0,0,255,0.3);
    clear: both;
    position: relative;
    left: 220px;
    top: -430px;
}

Answer 3

已修复此问题 - http://jsfiddle.net/3147og96/1/ HTML：

<div class="parent">
    <div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>

</div>

的CSS：

.parent {
    height: auto;
    width: 120px;
    padding: 5px;
    padding-left: 110px;
    border: 1px solid red;
}

.parent div {
    height: 50px;
    width: 50px;
    border: 1px solid red;
    display: inline-block;
}

#one, #two {

    float: left;
}