如何将一个 div 容器内的 2 个 div 与 CSS 对齐（见图）答案

【问题标题】：How to align 2 divs inside one div container with CSS (see image)如何将一个 div 容器内的 2 个 div 与 CSS 对齐（见图）
【发布时间】：2013-01-13 08:37:56
【问题描述】：

我正在制作一个正好为 6 个 div 的小布局宽度，我尝试了多次将其与浮动对齐、clear:both 和更改高度/宽度对齐，但没有成功。我想要这样的图片：http://i.stack.imgur.com/j1jxX.png

HTML 源代码：

    <div id="description">
    <div class="itemDescription"><!--Item 1-->
        <div class="imageDescription"></div>
        <div class="textDescription">
            <div class="titleDescription">Encontre pessoas</div>
            <div class="detailDescription">Encontre facilmente pessoas com um buscador inteligente</div>
        </div>
    </div>
        <div class="itemDescription"><!--Item 2-->
        <div class="imageDescription"></div>
        <div class="textDescription">
            <div class="titleDescription">Encontre pessoas</div>
    <div class="detailDescription">Encontre facilmente pessoas com um buscador inteligente</div>
    </div>
</div>

CSS 来源：

#description {
width: 96%;
background: rgb(244, 244, 0);
}
.itemDescription {
padding: 8px;
border: solid 1px red;
}
.imageDescription {
float: left;
height: 72px;
width: 20%;
background-image: url(http://addons.opera.com/media/extensions/75/86675/1.0-rev2/icons/icon_64x64.png);
background-position: center center;
background-repeat: no-repeat;
border-right: solid 3px black;
}
.textDescription {
float: left;
width: 70%;
border: solid 3px blue;

}
.titleDescription {
border: solid 3px brown;

}
.detailDescription {
border: solid 3px black;
padding: 10px;
}

这是我的 JSFiddle：http://jsfiddle.net/5xhQk/

也谢谢大家

【问题讨论】：

小提琴的布局与图像相同，只是外观不同。您在小提琴中显示的内容到底有什么问题？
黄色填充不尊重他们的空间......
完成了！！看看结果（我把彩虹色只是为了分离它：jsfiddle.net/5xhQk/3感谢所有帮助：D

标签： css layout css-float alignment

【解决方案1】：

你也可以使用 table 来获得你想要的，但如果你真的想使用 div，你需要在每个 div 中使用 float。像这样：http://jsfiddle.net/5xhQk/1/

#description{
  float: left;
  width: 100%;
}

.itemDescription{
  float: left;
  width: 100%;
  height: 72px;
}

.imageDescription{
  background: blue;
  float: left;
  width: 20%;
  height: 100%;
  border: 1px solid black;
}

.textDescription{
  float: left;
  width: 70%;
  height: 100%;
  border: 1px solid black;
  border-left: 0;
}

.titleDescription{
  float: left;
  width: 100%;
  border-bottom: 1px solid black;
}

.detailDescription{
  float: left;
  width: 100%;
}

哦，我不明白为什么在你的图片中它是宽度的 20% 和 70%，你打算用剩下的 10% 做什么？

【讨论】：

10% 是为边框保留的：/ 我不知道如何准确地使用 100% 的宽度。如果我做 20% + 80%，则 div 将中断到下一行
我有什么你想要的吗？

【解决方案2】：

让我看看我是否明白了，你想在itemDescription 中对齐imageDescription 和textDescription

【讨论】：

是的。我想让左 div 与右 div 对齐。哦，可以用边框把宽度精确到 100% 吗？

【解决方案3】：

试试类似的东西：

HTML：

<div class="itemDescription">
    <div class="imageDescription ">
        Your image
    </div>
    <div class="cl">&nbsp;</div>
    <div class="textDescription">
        some header
        some paragraph
    </div>
</div>

CSS：

.cl{
clear:both;
}
.itemDescription {

    width: something;

}

.imageDescription {

    float: left;
    width: something;
}

.textDescription {
    float: right;
    width: something;
}

【讨论】：

它也可以，使用 'clear:both' 我不需要在父 div 中使用 'float:left' :) 谢谢，