個性化的表1行2列

我想打一個表列之間的空間，在背景上，像這樣：個性化的表1行2列

當我調整我的頁面中的文本不應該退出框

#banner { 
 
    background-color: red; 
 
    margin-top: 70px; 
 
    background-size: cover; 
 
    height: 455px; 
 
    margin-left: 35px; 
 
    margin-right: 35px; 
 
    overflow: hidden; 
 
} 
 
.r1c1 { 
 
    float: left; 
 
    overflow: hidden; 
 
    width: 90%; 
 
} 
 
.r2c1 { 
 
    float: left; 
 
    overflow: hidden; 
 
}

<div id="banner"> 
 
    <div class="r1c1"> 
 

 
    <h2>Once you've experienced the pleasure and comfort of hydronic heating, there's no going back.</h2> 
 
    </div> 
 
    <div class="r2c1"> 
 
    <img class="voucher1" src="voucher1.png"> 
 
    </div> 
 
</div>

來源

2016-09-27 EdiD' s Channel

你真的要用桌子嗎？ – 3rdthemagical

OP可能是指*佈局*，而不是*表*。 – AA2992

@ 3rdthemagical不，我想看起來像那樣 –

如果你真的想使用一個表，我會用建議元素直接。相反，如果你正在做類似的顯示在你附加的圖像，我有幾個建議：

嘗試使用利潤率保持桌面細胞分離
試着將一個div容器周圍的文字和控制其大小來創建單元格之間有空格的外觀。
嘗試使用Twitter Bootstrap。它是開源的，非常好用，非常容易使用。它預置了大量不同的元素。讓你想會是簡單的：
```
<div class="col-lg-5 col-md-5" id="r1c1"><div> 
<div class="col-lg-2 col-md-2" id="spacer"><div> 
<div class="col-lg-5 col-md-5" id="r2c1"><div> 
```

而不必進一步確定COL-LG和Col-MD類，你已經採取了白手起家的網格系統的優勢，並創造了一個可擴展的表。希望有所幫助！

來源

2016-09-27 12:10:14 Dan

個性化的表1行2列

回答

相關問題