相关疑难解决方法(0)

我的页面结构如下:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

现在,child-leftDIV将拥有更多内容,因此parentDIV的高度会根据孩子的DIV而增加.

但问题是child-right身高并没有增加.我怎样才能使它的高度等于它的父母？

我希望在容器div中对齐3个div,如下所示:

[[LEFT]       [CENTER]        [RIGHT]]

容器div是100%宽(没有设置宽度),并且在调整容器大小后中心div应保持在中心.

所以我设置:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

但它变成了:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

有小费吗？

带有列表标签的网格列,我需要每3列以正确的顺序显示,并为每个额外的HTML列表元素启用自动宽度.

这是我的例子:

 <style>
        ul {
            margin: 0;
            padding: 0;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            height: 150px;
            width:auto;
        }
    
        li {
            float: left;
            display: inline-block;
            list-style: none;
            position: relative;
            height: 50px;
            width: 50px;
        }
    </style>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    </ul>

我想像这样转换输出:

1 4 7 10
2 5 8 11
3 6 9 12

重要的是我到目前为止我的Safari浏览器工作,我似乎无法解决这个问题,我会适当的任何帮助:)

测试链接:

http://jsfiddle.net/rafcastro77/3zd7yspg/59/

如你所见,list-items第一个row有相同的height.但是第二个项目row有所不同heights.我希望所有物品都有制服height.

有没有办法实现这一点,而不给出固定高度,只使用flexbox？

这是我的 code

.list {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing …

在CSS中,我可以这样做:

但我不知道如何将其改为:

这可能与CSS有关吗？

如果是,我怎么能在没有明确指定高度的情况下做到(让内容增长)？

bootstrap 2.0是否有任何助手可以使.span1,.span2 ...... .span12等于高度.我已经嵌套了这种类型的HTML

<div class='container'>
  <div class='row'>
    <div class='span2'>
      <div class='well'>
        XXXX
      </div>
    </div>
    <div class='span2'>
      <div class='well'>
        XXXX
        XXXX
      </div>
    </div>
    <div class='span2'>
      <div class='well'>
        XXXX
        XXXX
        XXXX
      </div>
    </div>
  </div>
</div>

如果可能的话,我希望每个井都达到相同的高度？

我有三个元素,我试图在我的布局中对齐.

首先,我有一个div反馈,然后是搜索输入,然后是div元素的建议.

我希望第一个和最后一个元素的宽度为20%,搜索输入的宽度为60%.使用Flexbox我实现了我想要的.

但是有一个功能可以将所有div增加到最高元素.这意味着当弹出搜索结果时,反馈和建议元素的高度会随着搜索div的增加而产生混乱的布局.

有没有一个技巧不增长具有最高元素的div？只是使div(#feedback和#suggestions)具有内容的高度？

#container_add_movies {
  display: flex;
}
#container_add_movies #feedback {
  width: 20%;
  background-color: green;
}
#container_add_movies #search {
  width: 60%;
  background-color: red;
}
#container_add_movies #suggestions {
  width: 20%;
  background-color: yellow;
}

<div id='container_add_movies'>
  <div id='feedback'>
    Feedback
  </div>
  <div id='search'>
    Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>
  </div>
  <div id='suggestions'>
    Suggestions
  </div>
</div>

http://codepen.io/alucardu/pen/PPjRzY

我<div>在父容器中有两个子元素<div>,如下所示:

<div class="row">
    <div class="item">
        <p>Sup?</p>
    </div>
    <div class="item">
        <p>Sup?</p>
        <p>Wish that other guy was the same height as me</p>
    </div>
</div>

我尝试了以下CSS:

.item {
    background: rgba(0,0,0,0.1);
    display: inline-block;
}

.row {
    border: 1px solid red;
}

我怎样才能让两个孩子(div.item)成为最高孩子的身高？

jsFiddle:http://jsfiddle.net/7m4f7/

div一个接一个给出9 秒,我想通过CSS创建一个3X3网格.

我怎么做？

.cell {
  height: 50px;
  width: 50px;
  background-color: #999;
  display: inline-block;
}

.cell:nth-child(3n) {
  background-color: #F00;
  /* what property should I use to get a line break after this element? */
}

/* this doesn't work; at least not in safari */
.cell:nth-child(3n)::after {
  display: block;
}

<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

注意:我不想要float/clear解决方案.重点是CSS,而不是HTML重组.

如果我添加content: '\A'; white-space: pre; …

如果不使用表格display:table,是否可以为输入左侧的标签设置灵活的宽度区域？出于浏览器兼容性原因,我还想避免网格布局.我希望css能够解决这个问题:

short_label   input_box____________________
tiny_label    input_box____________________
medium_label  input_box____________________

然后还相应处理更大的标签:

short_label            input_box__________
medium_label           input_box__________
very_extra_long_label  input_box__________

但我不想要:

short_label            input_box__________
tiny_label             input_box__________
medium_label           input_box__________

因此第一列需要具有灵活的宽度,第二列需要增长以填充空间.我的html理想情况下看起来像这样,但如果有必要,可以添加"行"div.我觉得有一个灵活的答案,但也许不是因为所有行都需要对齐.

<div class='aligned_form'>

  <label for='a'>short_label</label>
  <input type='text' id='a'>

  <label for='b'>medium_label</label>
  <input type='text' id='b'>

  <label for='c'>very_extra_long_label</label>
  <input type='text' id='c'>

</div>