取决于前面的列,使高度相等

时间:2018-01-29 22:12:28

标签: javascript html css

有人可以帮助我我在这里有这个例子,我需要有最大文本的col,其前面的col采取相同的高度而不是所有其他列我试过这样的东西但它总是需要高度为了所有..:/你能帮帮我吗?

body
{
  margin: 0;
}
#matchline-dynamic {
    width: 400px;
    background-color: #f2f2f2;
    border: solid 1px #b7b7b7;
    font-family: Roboto;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
}.col-xs-6 {
    width: 50%;
}
#matchline-static {
    background: white;
    font-family: Roboto;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
    border: 1px solid #e8e8e8;
}

.wrapper2
{
  display: flex;
  flex-direction: row;
  height: 100%;

}

.boxi
{
 

  height: 100px;
 
}
<div class="wrapper2">
            <div class="col-xs-6  ">
                <ul id="matchline-ul" class="todo-list matchline-options ui-sortable">
                                                                                                                                                                                            <li id="matchline-static" class=" boxi">
                        <span class="width-100" id="match-lines-options">
                        <input type="hidden" name="1024[]" value="1">
                            <div id="take-match-line-answer-text">
                                <span class="text padding-right-20">asdasd</span>
                            </div>
                        </span>
                    </li>
                                                                                                                                                                                                                <li id="matchline-static" class=" boxi">
                        <span class="width-100" id="match-lines-options">
                        <input type="hidden" name="1024[]" value="0">
                            <div id="take-match-line-answer-text">
                                <span class="text padding-right-20">sdfsdf</span>
                            </div>
                        </span>
                    </li>
                                                                                                <li id="matchline-static" class=" boxi">
                        <span class="width-100" id="match-lines-options">
                        <input type="hidden" name="1024[]" value="3">
                            <div id="take-match-line-answer-text">
                                <span class="text padding-right-20">asd</span>
                            </div>
                        </span>
                    </li>
                                                                                                <li id="matchline-static" class=" boxi">
                        <span class="width-100" id="match-lines-options">
                        <input type="hidden" name="1024[]" value="2">
                            <div id="take-match-line-answer-text">
                                <span class="text padding-right-20">s simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and s</span>
                            </div>
                        </span>
                    </li>
                                                                      </ul> 
            </div>

            <div class="col-xs-6 ">
                <ul class="todo-list ui-sortable">
                                                                            <li id="matchline-dynamic" class=" boxi">
                        <span class="handle width-100 ui-sortable-handle">
                        <input type="hidden" name="1024[]" value="3">
                              <div id="take-order-answer-text">
                       <i class="fa fa-bars"></i>
                    </div>
                            <div class="float-left">
                          
                                <span class="text padding-left-10">s simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and s</span>
                            </div>
                        </span>
                    </li>
                                                                                                <li id="matchline-dynamic" class=" boxi">
                        <span class="handle width-100 ui-sortable-handle">
                        <input type="hidden" name="1024[]" value="2">
                              <div id="take-order-answer-text">
                       <i class="fa fa-bars"></i>
                    </div>
                            <div class="float-left">
                          
                                <span class="text padding-left-10">sdf</span>
                            </div>
                        </span>
                    </li>
                                                                                                                                                        <li id="matchline-dynamic" class="boxi">
                        <span class="handle width-100 ui-sortable-handle">
                        <input type="hidden" name="1024[]" value="0">
                              <div id="take-order-answer-text">
                       <i class="fa fa-bars"></i>
                    </div>
                            <div class="float-left">
                          
                                <span class="text padding-left-10">sdf</span>
                            </div>
                        </span>
                    </li>
                                                                                                <li id="matchline-dynamic" class=" boxi">
                        <span class="handle width-100 ui-sortable-handle">
                        <input type="hidden" name="1024[]" value="1">
                              <div id="take-order-answer-text">
                       <i class="fa fa-bars"></i>
                    </div>
                            <div class="float-left">
                          
                                <span class="text padding-left-10">lasdh ajhsdg kjahgsdkhafsdgasdchhj adjkajsd</span>
                            </div>
                        </span>
                    </li>
                                                                                                                                                                                                                      
                </ul>
            </div>
        </div>

所以我认为这会对孩子产生影响,但我是新编码而且不知道......

0 个答案:

没有答案