Question

我知道很多关于div的主题都是关于div的，但是我找不到针对我的具体问题的解决方案。我设法并排获得2个div，并且是移动友好的（不需要横向滚动），但是存在背景颜色问题。如果1 div没有文本，而它旁边的div没有，那么缺少的高度块只显示空白而不是背景。如何在保持移动友好的同时解决这个问题？

示例页面：http://www.gloryhood.com/articles/ztest.html

CSS：

div.table {
max-width: 100%;
}
div.firsthalf {
background-color: #ffffff;
float: left;
max-width: 50%;
text-align: left;
word-wrap: break-word;
}
div.secondhalf {
background-color: #ffffff;
margin-left: 50%;
max-width: 50%;
text-align: left;
word-wrap: break-word;
}

HTML：

<div class="table">
<div class="firsthalf"> Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci 
</div>
<div class="secondhalf">
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
</div>
<div class="firsthalf">
Leftcvni
</div>
<div class="secondhalf">
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
</div>
<div class="firsthalf">
Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci
</div>
<div class="secondhalf">
Righvid
</div>
</div>

Answer 1

我想你想要这样的东西，

＆＃13;

$(document).ready(function(){
        $('.container').each(function(){
            var firstDiv = $(this).find('.firsthalf');
            var secondDiv = $(this).find('.secondhalf');
            if(firstDiv.height() >= secondDiv.height()){
                secondDiv.css('height',firstDiv.height());
            } else {
                firstDiv.css('height',secondDiv.height());
            }
        });
    });

＆＃13;

body{background: #39b1a4;}
    div.table {
    max-width: 100%;
}
div.firsthalf {
    background-color: #ffffff;
    float: left;
    width: 50%;
    text-align: left;
    word-wrap: break-word;
    
}
div.secondhalf {
    background-color: #ffffff;
    width: 50%;
    text-align: left;
    word-wrap: break-word;
    float: right;
    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
    <div class="container">
        <div class="firsthalf"> Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci 
        </div>

        <div class="secondhalf">
        Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
        </div>
    </div>

    <div class="container">
        <div class="firsthalf">
        Leftcvni
        </div>

        <div class="secondhalf">
        Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
        </div>
    </div>

    <div class="container">
        <div class="firsthalf">
        Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci
        </div>

        <div class="secondhalf">
        Righvid
        </div>
    </div>
</div>

＆＃13;

Div并排背景颜色不填充高度

1 个答案: