Question

所以我想在div中有一个容器div，有三个不等宽度的div，如图所示我设置了col-md-4，col-md-4，col-md-4但是还有更多的空间中间图像和中间图像之间其他方面甚至他们的高度都不是100％

我的HTML

    <div class="container borders">
     <div class="row nopadding logoblock">
<div class="col-md-4 nopadding">
  <div class="grad proinfo">
    <img src="images/prologo.png" class="center-block">
  </div>
</div>
<div class="col-md-4 nopadding proimg nopadding">
  <img src="images/bliss_nl.jpg" id="asd" class="center-block">
</div>
<div class="col-md-4 nopadding">
  <div class="railway protext">
    <p class="grad">
      A luxurious residential project amidst 
      the pleasing environment of Khar, 
      this imposing 13-storey apartment is a peaceful oasis that exudes opulence and class. 
    </p>
  </div>
</div>

CSS

.logoblock{
    background-image: url(../images/launch_bg.jpg);
}

.borders{
    border-style: solid;
    border-color: #706f6f;
    border-width: 5px;    
}

.railway p{
    padding: 10px 50px;
    color: #aaaaaa;
    line-height: 2.5;
    background-color: #303030;
    margin: 0px;
    text-align: center;
}

.grad{
    background: rgb(70,70,70);
    background: -moz-radial-gradient(center, ellipse cover, rgba(70,70,70,0.50) 0%, rgba(33,33,33,0.50) 100%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(70,70,70,0.50) 0%,rgba(33,33,33,0.50) 100%);
    background: radial-gradient(ellipse at center, rgba(70,70,70,0.50) 0%,rgba(33,33,33,0.50) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#212121',GradientType=1 );
}

Codepen

我想做什么

我做了什么

Answer 1

试试这个http://codepen.io/anon/pen/VvNGRX

<强> HTML

<div class="container borders">
  <div class="row nopadding logoblock">
    <div class="col-md-4 nopadding grad">
      <div class="proinfo">
        <img class="left-img" src="http://kwebmakerusa.com/samyakth/html/images/prologo.png" class="center-block">
      </div>
    </div>
    <div class="col-md-4 nopadding proimg nopadding">
      <img src="http://kwebmakerusa.com/samyakth/html/images/bliss_nl.jpg" id="asd" class="center-block">
    </div>
    <div class="col-md-4 nopadding grad">
      <div class="railway protext">
        <p>
          A luxurious residential project amidst 
          the pleasing environment of Khar, 
          this imposing 13-storey apartment is a peaceful oasis that exudes opulence and class. 
        </p>
      </div>
    </div>    
  </div>
</div>

<强> CSS

.nopadding{padding: 0px;}

.logoblock{
    background-image: url(http://kwebmakerusa.com/samyakth/html/images/launch_bg.jpg);
}

.borders{
    border-style: solid;
    border-color: #706f6f;
    border-width: 5px;    
}

.railway p{
    padding: 10px 50px;
    color: #aaaaaa;
    line-height: 2.5;
    margin: 0px;
    text-align: center;
}

.grad{
    background: rgb(70,70,70);
    background: -moz-radial-gradient(center, ellipse cover, rgba(70,70,70,0.50) 0%, rgba(33,33,33,0.50) 100%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(70,70,70,0.50) 0%,rgba(33,33,33,0.50) 100%);
    background: radial-gradient(ellipse at center, rgba(70,70,70,0.50) 0%,rgba(33,33,33,0.50) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#212121',GradientType=1 );
}

.row.nopadding.logoblock {
  display: table;
  height: 100%;
}

.col-md-4.nopadding.grad {
  display: table-cell;
  text-align:center;
  height: 100%;
  float: none;
  vertical-align: middle;
}

.proinfo {
  display: table;
  width: 100%;
}

.left-img {
  display: table-cell;
  vertical-align: middle;
}

.railway.protext {
  display: table;
  height: 100%;
}

.railway p {
  vertical-align: middle;
  display: table-cell;
}

.col-md-4.nopadding.proimg.nopadding {
  display: table;
  text-align: center;
  width: 100%;
}

.col-md-4.nopadding.proimg.nopadding img {
  display: table-cell;
  //width: 100%; //You can uncomment this and see what happend
}

Bootstrap不等列高度和高度不能设置子div高度

1 个答案: