无法获得高度相等的列和可见的排水沟

我正在尝试创建具有相同高度的列和可见排水沟的网格。我有相同的高度栏，但我不能在与body-element（米色）相同的背景色中制作可见的排水沟。我开始认为我想做的事是不可能的，因为填充作为排水沟...无法获得高度相等的列和可见的排水沟

我很感谢所有的帮助，我可以得到。 My code

编辑我不清楚我想要什么。我希望能够改变body-element上的背景颜色，以便它能够影响阴沟。就像你可以用Bootstrap（我已经听说它的阴沟设置为填充）Bootstrap example

请注意，我自己的例子只有一个列大小（.col-6），但我需要能够使用更多不同大小的列，这就是我没有使用边距的原因，因为它很难计算它们的大小，因此所有列大小+边距等于100％宽度。

body { 
 
    background-color: beige; 
 
} 
 

 
*, *:after, *:before { 
 
    padding: 0; 
 
    margin: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.row { 
 
    overflow: hidden; 
 
} 
 

 
.col-6 { 
 
    background-color: black; 
 
    float: left; 
 
    margin-bottom: -99999px; 
 
    padding-bottom: 99999px; 
 
    padding-right: 1.4em; 
 
    width: 50%; 
 
} 
 

 
[class*='col-']:last-of-type { 
 
    padding-right: 0; 
 
} 
 

 
.row:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
img { 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 

 
.information { 
 
    color: white; 
 
}

<div class="row"> 
 
    <div class="col-6"> 
 
    <img src="https://cdn.pixabay.com/photo/2016/11/08/05/16/ancient-1807518_960_720.jpg" alt=""> 
 
    </div> 
 
    <div class="col-6"> 
 
    <div class="information"> 
 
     <p>Aenean tincidunt ornare lacinia. Suspendisse lacinia bibendum ex, vehicula faucibus mauris ornare at. Fusce nec magna tincidunt urna molestie fringilla.</p> 
 
     <p>Nam fermentum, mauris eget elementum sodales, libero mauris egestas urna, vitae tempor felis felis eget augue.</p> 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-12-07 Dinobot

是你想要什么？：https://jsfiddle.net/7z6hfoL6/ – Banzay

body { 
 
    background-color: beige; 
 
} 
 

 
*, *:after, *:before { 
 
    padding: 0; 
 
    margin: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.row { 
 
    overflow: hidden; 
 
} 
 

 
.col-6 { 
 
    background-color: black; 
 
    float: left; 
 
    margin-bottom: -99999px; 
 
    padding-bottom: 99999px; 
 
    padding-right: 1.4em; 
 
    width: 49%; 
 
    margin-right:2%; 
 
} 
 

 
[class*='col-']:last-of-type { 
 
    margin-right: 0px; 
 
    float:right; 
 
} 
 

 
.row:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
img { 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 

 
.information { 
 
    color: white; 
 
}

<div class="row"> 
 
    <div class="col-6"> 
 
    <img src="https://cdn.pixabay.com/photo/2016/11/08/05/16/ancient-1807518_960_720.jpg" alt=""> 
 
    </div> 
 
    <div class="col-6 float-right"> 
 
    <div class="information"> 
 
     <p>Aenean tincidunt ornare lacinia. Suspendisse lacinia bibendum ex, vehicula faucibus mauris ornare at. Fusce nec magna tincidunt urna molestie fringilla.</p> 
 
     <p>Nam fermentum, mauris eget elementum sodales, libero mauris egestas urna, vitae tempor felis felis eget augue.</p> 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-12-07 13:50:36 Ashique

无法获得高度相等的列和可见的排水沟

回答

相关问题