引导列

时间：2016-12-21 14:48:31

标签： html css twitter-bootstrap

我有这样的html（bootstrap css）：

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

和css一样

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

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

标题以动态文本形式出现，因此它可以是1行，2行或3行。有没有办法让title高度与最高＆＃39;中的高度相同？标题为css only。无论来自api的标题文本如何，我都希望对齐属性。我希望上面的示例能够在不设置min-height: 40px;的情况下工作，因为我不知道最小高度应该是什么。

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

5 个答案:

答案 0 :(得分：4)

您可以使用该表。解决此问题

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

答案 1 :(得分：3)

据我所知，这在css中是不可能的，因为这两个元素不是彼此的兄弟。如果是这种情况display: table-cell可能是一种选择。

但是，使用jQuery时有一个解决方案，您可以查找最高的.title元素并将所有其他.title元素设置为此高度。

请参阅以下代码段：

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

请参阅小提琴，例如：http://jsfiddle.net/DTcHh/28131/

答案 2 :(得分：1)

使用当前HTML，您无法使两个块的高度与css相同。

但是，您可以使用:before或:after伪元素创建具有相同高度的虚假效果。

诀窍是在position: relative上使用.container并将其从子.col-xs-*类中删除。然后使用:before或:after伪元素，并使用明智的left和width值。

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

答案 3 :(得分：1)

您可以覆盖CSS引导程序，并使用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>

答案 4 :(得分：0)

我稍微调整了一下解决方案：

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

然后您可以使用

功能 
sameheight(".blogtitle");
相关问题
最新问题