html - 位置 3 div

标签 html css

我有 3 个 div,“left div”、“right div”和“bottom div”。我一直在绝望地尝试以某种方式定位它们,但它不起作用。这就是我理想中希望他们成为的样子: enter image description here

主要问题是“left div”和“right div”的高度不同,所以我该如何解决这个问题?

编辑:我还想补充一点,左右 div 需要在内容区域内居中。

最佳答案

<div id="content">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
    <div class="bottom">
        Bottom
    </div>
</div>

CSS:

#content{
    width:1000px;
    margin:0 auto;
}

.left{
    width:495px;
    float:left;
    margin-right:10px;
}

.right{
    width:495px;
    float:left;
}

.bottom{
    clear:both;
    margin-top:10px;
}

那么如果你想让左右匹配: (使用 jquery)

$(document).ready(function(){
    var leftdiv = $('.left').height();
    var rightdiv = $('.right').height();

    if(leftdiv > rightdiv)
        $('.right').css('height', leftdiv + 'px');
    else
        $('.left').css('height', rightdiv + 'px');
});

关于html - 位置 3 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8480928/

相关文章:

java - Vaadin 14 显示简单的 HTML 页面

css - 建议/自动完成在 VS 代码中不起作用

html - 是否有支持多特征搜索的浏览器兼容性数据库?

html - Material Design Lite 粘性迷你页脚在 flex 容器中使用时被截断

javascript - HTML5 MediaSource Extension 'updateend' 事件如何报告时间?

javascript - 帮助在 HTML5 Canvas 中模拟深度

javascript - 如何检测 jQuery 中每个() 内部元素的悬停?

Javascript代码使用三次后执行两次

html - 如何修复 safari 和 chrome 上的谷歌字体像素化问题

html - 基本 CSS 问题