我正在努力创建一个包装在一个单一的元素的集合。我画了一个我想要创造的东西。创建一个类似ID卡的包装
的HTML应该是这样的：
<div class="wrapper-1">
<div class="image"></div>
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star</p>
</div>
什么是创造这样一个包装的最佳方式？
我宁愿创建两列.left-side和.right-side主包装内的内容如下添加到这些列：
<div class="wrapper-1">
<div class="left-side">
<div class="image"></div>
</div>
<div class="right-side">
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star</p>
</div>
</div>
这里是完全实现的版本：
.wrapper-1 {
width: 400px;
height: 100px;
}
.left-side {
float: left;
width: 100px;
height: 100px;
margin-right: 15px;
}
.left-side > .image {
background: url(http://placehold.it/100x100) no-repeat center center;
width: 100px;
height: 100px;
margin-right: 10px;
}
.right-side {
float: left;
width: 285px;
height: 100px;
}
.right-side > .title {
margin: 0;
}<div class="wrapper-1">
<div class="left-side">
<div class="image"></div>
<img src="" alt="">
</div>
<div class="right-side">
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star</p>
</div>
</div>这个怎么样，使用flexbox
.wrapper-1 {
display: flex;
}
.wrapper-2 {
display: flex;
flex-direction: column
}
.wrapper-1 .image {
width: 100px;
height: 100px;
background: url(http://placehold.it/100/00f);
margin-right: 10px;
}<div class="wrapper-1">
<div class="image"></div>
<div class="wrapper-2">
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star</p>
</div>
</div>如果你不能改变的标记，使用position: absolute
.wrapper-1 {
padding-left: 110px;
box-sizing: border-box;
}
.wrapper-1 .image {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: url(http://placehold.it/100/00f);
}<div class="wrapper-1">
<div class="image"></div>
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star</p>
</div>这是一个完整的解决方案：
HTML：
<div class="wrapper clearfix">
<div class="left">
<img src="img.png">
</div>
<div class="right">
<h3>text</h3>
<p>text text</p>
</div>
</div>
CSS：
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.wrapper {
box-sizing: border-box; /* makes padding go on the inside */
padding: 10px; /* gives interior padding */
width: 1170px; /* whatever width you want the container to be */
margin: 0 auto; /* center it */
background-color: #fff;
}
.left {
width: 20%; /* whatever width you want the left side to be, stick to percentages */
float: left;
}
.left img {
width: 100%;
height: auto;
}
.right {
width: 77%; /* whatever width you want the right side to be, stick to percentages, notice that 77% and 20% dont add up to 100%, this is to account for the small gap inbetween the divs */
float: right;
}
注：漂浮的东西左右，当 “clearfix” 一词。它可以防止当div div被浮动时，div本身崩溃的常见错误。
工作的jsfiddle：here
你可以浮动图像盒和修改BFC的容器和文本https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context例子从你的HTML http://codepen.io/gc-nomade/pen/yVLJPE –