Same height title in bootstrap columns

问题

I have html (bootstrap css) like this:

<div class="container">
  <div class="row">
    <div class="col-xs-6 col">   
      <div class="block">    
        <div class="title">
          <strong>Dynamic title 1 line</strong>
        </div>
        <div>
          <i>Prop 1</i>
        </div>
        <div>
          Value 1
        </div>  
       </div> 
    </div>
    <div class="col-xs-6 col">   
      <div class="block">
        <div class="title">
          <strong>Dynamic title <br>more than 1 line</strong>
        </div>
        <div>
          <i>Prop 1</i>
        </div>
        <div>
          Value 1
        </div>  
       </div>
    </div>
  </div>
</div>

And css like this

.block{
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
    text-align: center;
}

.title{
  margin-bottom: 10px;
  min-height: 40px;
}

Title comes as dynamic text so it can be 1, 2, or 3 lines. Is there a way to make title height the same height as the height in the 'highest' title with css only. I want properties be aligned regardless of the title text coming in from api. I would like the above example to work without setting min-height: 40px; because I don't know what min-height should be.

http://jsfiddle.net/DTcHh/28125/

回答1:

As far as I am aware this is impossible in css only since the two elements are not siblings of each other. If that was the case display: table-cell could have been an option.

However there is a solution for this when using jQuery you can look up the highest .title element and set all the other .title elements to this heights.

See the following snippet:

var largest = 0;
//loop through all title elements
$(document).find(".title").each(function(){
  var findHeight = $(this).height();
  if(findHeight > largest){
    largest = findHeight;
  }  
});

$(document).find(".title").css({"height":largest+"px"});

See the fiddle for an example: http://jsfiddle.net/DTcHh/28131/

回答2:

You can use the table.For solving this problem

.block{
    margin: 10px;
    padding: 10px;
    text-align: center;
}
td.block-cell {
  border: 1px solid #000;
}
.block-wrap {
  background-color: transparent;
  border-collapse: separate;
  border-spacing: 10px;
}
.title{
  margin-bottom: 10px;
  min-height: 40px;
}

<!DOCTYPE html><head>
<title>Test</title><meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=0'>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

</head>

<body>

<div class="container">
  <table class="block-wrap">
  <tr>
    <td class="block-cell">   
      <div class="block">    
        <div class="title">
          <strong>Dynamic title 1 line</strong>
        </div>
        <div>
          <i>Prop 1</i>
        </div>
        <div>
          Value 1
        </div>  
       </div> 
    </td>
	
    <td class="block-cell" >   
      <div class="block">
        <div class="title">
          <strong>Dynamic title <br>more than 1 line</strong>
        </div>
        <div>
          <i>Prop 1</i>
        </div>
        <div>
          Value 1
        </div>  
       </div>
    </td>
	</tr>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

回答3:

With current HTML you can't make height of both blocks same with css.

However you can create a fake effect of having same height with :before or :after pseudo elements.

The trick is to use position: relative on .container and remove it from child .col-xs-* classes. Then use :before or :after pseudo element with wisely calculated left and width values.

.same-height-container {
  position: relative;
}
.same-height-container .col {
  position: static;
}
.same-height-container .col:before {
  width: calc(50% - 30px - 20px); /* .container left-right padding +
                                     .block left-right margin */
  border: 1px solid black;
  background: green;
  position: absolute;
  content: '';
  left: 25px;  /* container left padding + block left margin */
  bottom: 10px;
  top: 10px;
  z-index: -1;
}
.same-height-container .col + .col:before {
  right: 25px;
  left: auto;
}

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
  margin: 10px;
}

.block {
  margin: 10px;
  padding: 10px;
  text-align: center;
}

.title{
  margin-bottom: 10px;
  min-height: 40px;
}

.same-height-container {
  position: relative;
}

.same-height-container .col {
  position: static;
}

.same-height-container .col:before {
  width: calc(50% - 50px);
  border: 1px solid black;
  background: green;
  position: absolute;
  content: '';
  left: 25px;
  bottom: 10px;
  top: 10px;
  z-index: -1;
}

.same-height-container .col + .col:before {
  right: 25px;
  left: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container same-height-container">
  <div class="row">
    <div class="col-xs-6 col">   
      <div class="block">    
        <div class="title">
          <strong>Dynamic title 1 line</strong>
        </div>
        <div>
          <i>Prop 1</i>
        </div>
        <div>
          Value 1
        </div>  
      </div> 
    </div>
    <div class="col-xs-6 col">   
      <div class="block">
        <div class="title">
          <strong>Dynamic title <br>more than 1 line Dynamic title <br>more than 1 lineDynamic title <br>more than 1 lineDynamic title <br>more than 1 line</strong>
        </div>
        <div>
          <i>Prop 1</i>
        </div>
        <div>
          Value 1
        </div>  
      </div>
    </div>
  </div>
</div>

回答4:

You can override the CSS bootstrap, and to make the columns were of the same height using flexbox.

body {
    margin: 10px;
}
.same-height-wrapp {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.same-height-wrapp > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

.block{
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
    text-align: center;
    height: 100%;
    position: relative;
}

.title{
  margin-bottom: 60px;
}
.desc-wrapp{
    position: absolute;
    height: auto;
    width: 100%;
    bottom: 15px;
   
 }

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row same-height-wrapp">
        <div class="col-xs-6 col same-height">   
          <div class="block">
            <div class="title">
              <strong>Dynamic title 1 line</strong>
            </div>
            <div class="desc-wrapp">
              <div>
                <i>Prop 1</i>
              </div>
              <div>
                Value 1
              </div> 
            </div>
           </div> 
        </div>
        <div class="col-xs-6 col same-height">   
          <div class="block">
            <div class="title">
            <strong>Dynamic title <br>more than 1 line<br> line 2</strong>
            </div>
            <div class="desc-wrapp">
              <div>
                <i>Prop 1</i>
              </div>
              <div>
                Value 1
              </div>
            </div>
           </div>
        </div>
    </div>
</div>

回答5:

I adjust the solution a little bit:

function sameheight(div){
    /* Latest compiled and minified JavaScript included as External Resource */

    var largest = 160;
    var findHeight = 0;

   //loop through all title elements
    $(document).find(div).each(function(){
      findHeight = $(this).height();
      if(findHeight > largest){
        largest = findHeight;
      }  
});

    $(document).find(div).css({"height":findHeight+"px"});
};

Then you can use the function with

sameheight(".blogtitle");

来源：https://stackoverflow.com/questions/41265535/same-height-title-in-bootstrap-columns

标签

html

css

twitter-bootstrap