4 Div的下一个相同的高度和填充在它们下面

时间：2015-04-28 12:36:00

标签： html css html5 css3

我已经尝试过一切让这些Div达到同样的高度，但仍然无法找到答案让他们达到同样的高度......

添加大量填充然后添加负边距并不起作用，因为顶部的4个div和下面的内容之间必须有空间

登录Div和页脚相同......

＆＃13;
＆＃13; 
.container_12 [class*='grid_'] {
  width: 100%;
  text-align: center;
}
.container_12 .grid_3 {
  min-width: 0px;
  min-height: 100px;
}
.container_12 .grid_9 {
  text-align: left;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
  display: inline-block;
  float: left;
  position: relative;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
@media screen and (min-width: 45em) {
  .container_12 [class*='grid_'] {
    width: 100%;
    text-align: left;
  }
  .container_12 .grid_1 {
    width: 6.333%;
  }
  .container_12 .grid_2 {
    width: 14.667%;
  }
  .container_12 .grid_3 {
    width: 23.0%;
  }
  .container_12 .grid_4 {
    width: 31.333%;
  }
  .container_12 .grid_5 {
    width: 39.667%;
  }
  .container_12 .grid_6 {
    width: 48.0%;
  }
  .container_12 .grid_7 {
    width: 56.333%;
  }
  .container_12 .grid_8 {
    width: 64.667%;
  }
  .container_12 .grid_9 {
    width: 73.0%;
  }
  .container_12 .grid_10 {
    width: 81.333%;
  }
  .container_12 .grid_11 {
    width: 89.667%;
  }
  .container_12 .grid_12 {
    width: 98.0%;
  }
  /* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
  /* http://sonspring.com/journal/clearing-floats */
  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
  .clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  .clearfix {
    display: inline-block;
  }
  * html .clearfix {
    height: 1%;
  }
  .clearfix {
    display: block;
  }
  .container_12 {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .header {
    margin-top: 3%;
    margin-bottom: 3%;
    position: relative;
  }
  .header div[class*='grid_'] {
    margin-bottom: 2%;
  }
  .top {
    position: relative;
  }
  .top div[class*='grid_'] {
    background-color: #f5f5f5;
    margin-bottom: 2%;
  }
  .top div[class*='grid_'] a {
    color: #d45f4a;
    font-weight: 300;
    text-decoration: none;
  }
  .top p,h2 {
    padding-left: 20px;
    padding-right: 20px;
  }
  .top img {
    padding-top: 20px;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  .bottom div[class*='grid_'] {
    background-color: #f5f5f5;
    min-height: 250px;
  }
  .content div[class*='grid_'] {
    background-color: #f5f5f5;
    min-height: 350px;
    font-size: medium;
    margin-right: 1%;
  }
  .content-top div[class*='grid_'] {
    background-color: #f5f5f5;
    min-height: 200px;
    font-size: medium;
  }
＆＃13; 
<div class="container_12">
  <div class="top">
    <div class="grid_3">
      <img src="images/wvl-logo-small.png" alt="freeroll-icoon" class="align-center">
      <h2><a href="kalender.php">Freepoker Events</a></h2>
      <p>Live en Gratis! Sfeer en gezelligheid ten troef! Kijk snel waar er een toernooi plaatsvindt!</p>
    </div>
    <div class="grid_3">
      <img src="images/foolhouse-icon.png" alt="Foolhouse-Icoon" class="align-center">
      <h2><a href="foolhouse.php">Foolhouse</a></h2>
      <p>Onze pokerclub uit Ingelmunster die 2 wekelijks plaatsvindt! Meer info kunt u hier terugvinden</p>
    </div>
    <div class="grid_3">
      <img src="images/special-icon.png" alt="deepstack-icoon" class="align-center">
      <h2><a href="#">Specials</a></h2>
      <p>Qualifiers, Buyins, Steps,... Allerlei events voor verschillende prijzen en buyins</p>
    </div>
    <div class="grid_3">
      <img src="images/ranking-icon.png" alt="ranking-icoon" class="align-center">
      <h2><a href="klassement.php">Ranking</a></h2>
      <p>Sta je op nummer 1? Bekijk het hier snel! Zowel Algemeen, All-Time als per locatie.</p>
    </div>
  </div>
  <div style="clear: both;"></div>
  <div class="content">
    <div class="grid_9" id="nieuws">
      <span class="date"> 26 April 2015 </span>
      <h2><a href="bericht.php?id=41">Ga dankzij WVLFreepoker &amp; Foolhouse naar het € 600 APAT Team Event!</a></h2>
      <p>U bent waarschijnlijk reeds op de hoogte dat de Amateur Poker Association &amp; Tour (APAT) sinds vorig jaar in België is neergestreken. Onze eerste twee events in de casinoâs van Namen en Spa waren alvast een groot succes en wij hopen op een
        positief vervolg qua aantallen tijdens de drie resterende …</p>
      <p><a href="bericht.php?id=41">Lees verder</a>
      </p>
      <span class="date"> 8 April 2015 </span>
      <h2><a href="bericht.php?id=40">BAPT Namen Qualifier</a></h2>
      <p>APAT Belgium &amp; The Red Jacks presenteren in 2015 de APAT BELGIAN AMATEUR POKER TOUR met 4 stops langs Belgische casinos. Na de eerste succesvolle stop in het Casino van Spa zullen ze nu neerstrijken in het Casino van Namen!
        <br>
        <br>BAPT Namen
        <br>
        <br>Vr 22/5&nbsp;&nbsp;&nbsp;&nbsp;20:0…</p>
      <p><a href="bericht.php?id=40">Lees verder</a>
      </p>
    </div>
    <div class="grid_3">
      <div class="flat_form">
        <div id="login-event" class="form-action">
          <h2>Login</h2>
          <form method="POST" action="redirect.php">
            <ul>
              <li>
                <input type="text" name="username" size="25" maxlength="25" placeholder="Username">
              </li>
              <li>
                <input type="password" name="password" size="25" maxlength="25" placeholder="Password">
              </li>
              <li>
                <input type="submit" name="submit" value="Login" class="button">
                <input type="checkbox" name="remember" value="Yes">onthou mij</li>
              <li><a href="emailpass.html" class="button-wachtwoord">Wachtwoord vergeten</a>
              </li>
            </ul>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

希望有人可以帮助我:)图片包括显示问题

这就是现在的样子 https://www.dropbox.com/s/j2l1xx18fcxdu8u/Schermafdruk%202015-04-28%2014.19.26.png?dl=0

这就是我想要的方式：）

https://www.dropbox.com/s/jenuvh5k6p0f402/WVL-Template.jpg?dl=0

3 个答案:

答案 0 :(得分：1)

String

并添加：

CSS LINE 119: CHANGE

.top div[class*='grid_'] {
   background-color: #f5f5f5;
   margin-bottom: 2%;
}

TO:

.top div[class*='grid_'] {
   background-color: #f5f5f5;
   margin-bottom: 2%;
   min-height: 240px; <--
}

答案 1 :(得分：0)

.container_12 [class*='grid_'] {
  width: 100%;
  text-align: center;
}
.container_12 .grid_3 {
  min-width: 0px;
  min-height: 100px;
}
.container_12 .grid_9 {
  text-align: left;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
  display: inline-block;
  float: left;
  position: relative;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
@media screen and (min-width: 45em) {
  .container_12 [class*='grid_'] {
    width: 100%;
    text-align: left;
  }
  .container_12 .grid_1 {
    width: 6.333%;
  }
  .container_12 .grid_2 {
    width: 14.667%;
  }
  .container_12 .grid_3 {
    width: 23.0%;
    min-height:220px;
  }
  .container_12 .grid_4 {
    width: 31.333%;
  }
  .container_12 .grid_5 {
    width: 39.667%;
  }
  .container_12 .grid_6 {
    width: 48.0%;
  }
  .container_12 .grid_7 {
    width: 56.333%;
  }
  .container_12 .grid_8 {
    width: 64.667%;
  }
  .container_12 .grid_9 {
    width: 73.0%;
  }
  .container_12 .grid_10 {
    width: 81.333%;
  }
  .container_12 .grid_11 {
    width: 89.667%;
  }
  .container_12 .grid_12 {
    width: 98.0%;
  }
  /* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
  /* http://sonspring.com/journal/clearing-floats */
  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
  .clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  .clearfix {
    display: inline-block;
  }
  * html .clearfix {
    height: 1%;
  }
  .clearfix {
    display: block;
  }
  .container_12 {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .header {
    margin-top: 3%;
    margin-bottom: 3%;
    position: relative;
  }
  .header div[class*='grid_'] {
    margin-bottom: 2%;
  }
  .top {
    position: relative;
  }
  .top div[class*='grid_'] {
    background-color: #f5f5f5;
    margin-bottom: 2%;
  }
  .top div[class*='grid_'] a {
    color: #d45f4a;
    font-weight: 300;
    text-decoration: none;
  }
  .top p,h2 {
    padding-left: 20px;
    padding-right: 20px;
  }
  .top img {
    padding-top: 20px;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  .bottom div[class*='grid_'] {
    background-color: #f5f5f5;
    min-height: 250px;
  }
  .content div[class*='grid_'] {
    background-color: #f5f5f5;
    min-height: 350px;
    font-size: medium;
    margin-right: 1%;
  }
  .content-top div[class*='grid_'] {
    background-color: #f5f5f5;
    min-height: 200px;
    font-size: medium;
  }
<div class="container_12">
  <div class="top">
    <div class="grid_3">
      <img src="images/wvl-logo-small.png" alt="freeroll-icoon" class="align-center">
      <h2><a href="kalender.php">Freepoker Events</a></h2>
      <p>Live en Gratis! Sfeer en gezelligheid ten troef! Kijk snel waar er een toernooi plaatsvindt!</p>
    </div>
    <div class="grid_3">
      <img src="images/foolhouse-icon.png" alt="Foolhouse-Icoon" class="align-center">
      <h2><a href="foolhouse.php">Foolhouse</a></h2>
      <p>Onze pokerclub uit Ingelmunster die 2 wekelijks plaatsvindt! Meer info kunt u hier terugvinden</p>
    </div>
    <div class="grid_3">
      <img src="images/special-icon.png" alt="deepstack-icoon" class="align-center">
      <h2><a href="#">Specials</a></h2>
      <p>Qualifiers, Buyins, Steps,... Allerlei events voor verschillende prijzen en buyins</p>
    </div>
    <div class="grid_3">
      <img src="images/ranking-icon.png" alt="ranking-icoon" class="align-center">
      <h2><a href="klassement.php">Ranking</a></h2>
      <p>Sta je op nummer 1? Bekijk het hier snel! Zowel Algemeen, All-Time als per locatie.</p>
    </div>
  </div>
  <div style="clear: both;"></div>
  <div class="content">
    <div class="grid_9" id="nieuws">
      <span class="date"> 26 April 2015 </span>
      <h2><a href="bericht.php?id=41">Ga dankzij WVLFreepoker &amp; Foolhouse naar het € 600 APAT Team Event!</a></h2>
      <p>U bent waarschijnlijk reeds op de hoogte dat de Amateur Poker Association &amp; Tour (APAT) sinds vorig jaar in België is neergestreken. Onze eerste twee events in de casinoâs van Namen en Spa waren alvast een groot succes en wij hopen op een
        positief vervolg qua aantallen tijdens de drie resterende …</p>
      <p><a href="bericht.php?id=41">Lees verder</a>
      </p>
      <span class="date"> 8 April 2015 </span>
      <h2><a href="bericht.php?id=40">BAPT Namen Qualifier</a></h2>
      <p>APAT Belgium &amp; The Red Jacks presenteren in 2015 de APAT BELGIAN AMATEUR POKER TOUR met 4 stops langs Belgische casinos. Na de eerste succesvolle stop in het Casino van Spa zullen ze nu neerstrijken in het Casino van Namen!
        <br>
        <br>BAPT Namen
        <br>
        <br>Vr 22/5&nbsp;&nbsp;&nbsp;&nbsp;20:0…</p>
      <p><a href="bericht.php?id=40">Lees verder</a>
      </p>
    </div>
    <div class="grid_3">
      <div class="flat_form">
        <div id="login-event" class="form-action">
          <h2>Login</h2>
          <form method="POST" action="redirect.php">
            <ul>
              <li>
                <input type="text" name="username" size="25" maxlength="25" placeholder="Username">
              </li>
              <li>
                <input type="password" name="password" size="25" maxlength="25" placeholder="Password">
              </li>
              <li>
                <input type="submit" name="submit" value="Login" class="button">
                <input type="checkbox" name="remember" value="Yes">onthou mij</li>
              <li><a href="emailpass.html" class="button-wachtwoord">Wachtwoord vergeten</a>
              </li>
            </ul>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

使用FLEX！ 它非常易于使用，就像一个魅力。

<div class="container_12">
  <div class="top">
    <div class="grid_3">
        Text
    </div>
    <div class="grid_3">
        Text<br />
        lorem ipsum dolor sit<br />
        text text
    </div>
    <div class="grid_3">
        Text
    </div>
    <div class="grid_3">
        Text
    </div>
  </div>
</div>


.container_12 .top { display: flex; }
.container_12 .top .grid_3 { background-color: lime; margin-right: 5px; flex: 1; }
.container_12 .top .grid_3:last-child { margin-right: 0; }

小提琴演示 - ＆gt; http://jsfiddle.net/SchweizerSchoggi/s8pzayep/

PS：比较css代码的数量.....

相关问题
最新问题