創建一個類似ID卡的包裝

我正在努力創建一個包裝在一個單一的元素的集合。我畫了一個我想要創造的東西。創建一個類似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>

什麼是創造這樣一個包裝的最佳方式？

來源

2016-11-03 sanjihan

你可以浮動圖像盒和修改BFC的容器和文本https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context例子從你的HTML http://codepen.io/gc-nomade/pen/yVLJPE –

我寧願創建兩列.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>

來源

2016-11-03 22:01:04

這個怎麼樣，使用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>

來源

2016-11-03 22:00:40 LGSon

這是一個完整的解決方案：

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

來源

2016-11-03 22:16:14

創建一個類似ID卡的包裝

回答

相關問題