html - 如何让三个 div 标签自动对齐以响应用户的视口(viewport)？-6ren

html - 如何让三个 div 标签自动对齐以响应用户的视口(viewport)？

转载作者：行者123 更新时间：2023-11-28 04:43:28

到目前为止，这是我的代码:https://codepen.io/mellifluous/pen/GNBbMe

<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
<div class="col-lg-4 col-md-6 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
<div class="col-lg-4 col-md-6 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
</div>

最佳答案

这是一个 fiddle ，我想这就是你要找的东西

http://codepen.io/anon/pen/GNXKXd

  <body>
    <p id="main-heading">Our Menu</p>
    <div class="outer-div col-md-4-sm-6">
      <div class="container" id="chicken-block">
        <p class="section-heading" id="chicken-heading">Chicken</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
    <div class="outer-div col-md-4-sm-6">
      <div class="container" id="beef-block">
        <p class="section-heading" id="beef-heading">Beef</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
    <div class="outer-div col-md-4-sm-12">
      <div class="container" id="sushi-block">
        <p class="section-heading" id="sushi-heading">Sushi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </body>



*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
div.outer-div{
  margin:0;
  padding:0 15px;
}
div.container{
  margin:0;
  padding:40px 15px 15px 15px;
  background-color:#f5f5f5;
  border:2px solid black;
  position:relative;
  margin-bottom:20px;
}
p{
  font-family:sans-serif;
  font-size:100%;
}
p#main-heading{
  text-align:center;
  margin-top:30px;
  margin-bottom:40px;
  font-size:175%;
  font-weight:bold;
}
p.section-heading{
  font-size:125%;
  font-weight:bold;
  margin:0;
  width:100px;
  text-align:center;
  padding:3px 10px;
  border:2px solid black;
  position:absolute;
  top:-2px;
  right:-2px;
}
p#chicken-heading{
  background-color:#d59898;
}
p#beef-heading{
  color:#f5f5f5;
  background-color:#bd4341;
}
p#sushi-heading{
  background-color:#e5d198;
}
@media (min-width:992px){
  div.col-md-4-sm-6{
    width:33.33%;
    float:left;
  }
  div.col-md-4-sm-12{
    width:33.33%;
    float:left;
  }
}
@media (min-width:768px) and (max-width:991px){
  div.col-md-4-sm-6{
    width:50%;
    float:left;
  }
  div.col-md-4-sm-12{
    width:100%;
    float:none;
    clear:both;
  }
}