html - 4个Divs彼此相邻，且高度相同，并在其下方填充

Closed. This question needs details or clarity。它当前不接受答案。












                            想改善这个问题吗？添加详细信息并通过editing this post阐明问题。

                        4年前关闭。



我已经尽一切努力使那些Div保持相同的高度，但是仍然找不到答案让它们保持相同的高度...

添加大量的填充，然后加上负的边距是行不通的，因为顶部的4 div和下面的内容之间必须有空间

登录Div和页脚相同...

.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;
  }

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

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

现在就是这样
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

最佳答案

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; <--
}

并添加：

@media screen and (max-width:1100px) {
   .top div[class*='grid_'] {
      min-height: 320px;
   }
}

关于html - 4个Divs彼此相邻，且高度相同，并在其下方填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29919711/

上一篇：javascript - 像图像一样缩放 div

下一篇：javascript - 防止非固定元素在到达固定元素的末尾时滚动

相关文章：

html - 使用 CSS3 获取设备物理尺寸

php - 使用 PHP 将 MySQL 查询的结果显示到表中

css - div 元素中的图像不处理 CSS 事件伪类

html - 插入更多内容时背景图像不固定

javascript - 为div链接制作nofollow行为

html5 - PhoneGap Android-html5缓存远程资源(html，js，css等)

html - 可以为 <p> 标签使用 id 吗？

jquery - 单击更改元视口(viewport)内容

css - firefox 和 chrome 之间边距不兼容

javascript - 是否可以在服务器端使用HTML5 Canvas 生成图像？