创建一个类似于ID卡的包装器

Question

我正在努力创建一个包含在单个元素中的元素集合。我草拟了我想要创造的东西。

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>

创建这样的包装器的最佳方法是什么？

Answer 1

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

Answer 2

我更愿意在主包装器中创建两列.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>

Answer 3

这是一个完整的解决方案：

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自身崩溃的常见错误。

工作jsfiddle：here