相关疑难解决方法(0)

我的HTML代码只是将页面分为两列,分别为65%,35%.

<div style="float : left; width :65%; height:auto;background-color:#FDD017;">
   <div id="response">
   </div> 
</div>
<div style="float : left; width :35%;height:auto; background-color:#FDD017;">
   <div id="note">
   </div>
</div> 

在response div,我有可变数据; 在note div,我有固定的数据.尽管两者div有两组不同的数据,但我需要它们以相同的高度显示,以便背景颜色看起来填充包含两者的框.当然,问题在于response div,其高度根据当前在其中显示的数据量而变化.

我怎样才能确保两列的高度始终相等？

我试图垂直#sidebar填充#main(和匹配#content的高度).我该怎么做呢？

这是我的jsFiddle.

CSS:

#main {
   border: solid green 2px;
}

#sidebar {
    background-color: red;
    width: 20%;
    overflow: auto;
    float: left;
    height: 100%;
}

#content {
    background-color: orange;
    width: 80%;
    overflow: auto;
    float: left;
    height: 100%;
}

#main-footer {
    clear: both;
}?

和HTML:

<div id="main">

 <div id="sidebar">
     <ul>
         <li>abc</li>
         <li>def</li>
     </ul>
 </div>

 <div id="content">
defsdfasdfasd fjasd;lf jasdl;fkjasd; lfjas; lfkjadsfl;sdajfs dlfjsdlfksjflaskfjsdaljfasdl asdfsad sfljsf sadfjsldfj sakfj;alsdfj dfsjsadfl;j asdlfjl;asdfj 
defsdfasdfasd fjasd;lf jasdl;fkjasd; lfjas; lfkjadsfl;sdajfs dlfjsdlfksjflaskfjsdaljfasdl asdfsad sfljsf …

我thumbnail span3每个Twitter Bootstrap行有3个元素,但<p>文本是可变的,它打破了布局.如何将每个thumbnail缩略图设置为最大缩略图的高度,以便它们正确流动？

<div class="box_line" style="float: left; border: 1px solid red;">
  <div class="thumbnail span3">
    <img src="http://placehold.it/260x180" alt=""/>
    <div class="caption">
      <h5>Thumbnail label</h5>
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </div>
  </div>
</div>

我还没有找到一个可用的jQuery插件来执行此操作,本主题 中的解决方案对我也不起作用.

我正在尝试使用2列相同高度的2列设计(使用Twitter Bootstrap).

我们来看这个例子:

<div class="row-fluid">
    <div class="span2">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>

    <div class="span10">
        test
    </div>
</div>

因为它.span2是两列中最高的,所以它可以.row-fluid伸展以适应它的高度.看完这篇文章,我期待的是设置min-height: 100%在.span10将使其伸展到全高,但是它没有:

http://jsfiddle.net/WTNeB/1/

这是为什么？任何解决方案,以.span10拉伸到其父高度,避免设置固定的高度,以保持这种设计灵活？

在Twitter Bootstrap(原始小提琴)中扩展关于如何制作相等高度列的问题.
现在列高度匹配,但我需要使标题垂直对齐在底部.

这是一个新的小提琴.

正如您所看到的,H2标题不对齐.
这是我希望它看起来的样子:

开始使用:<div class="row-fluid col-wrap">不起作用,因为标题与媒体中断处的文本分开.

我想在我的css表中使用百分比.不幸的是,它对我不起作用.

这段代码出了什么问题？我应该使用flexbox而不是table吗？

我想用表,因为我想要相同的高度列.

ul {
  list-style: none;
  margin: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  width: 50%;
  display: table-cell;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>