如何并排创建两个div，其中一个延伸到页面宽度? [英] How to create two divs side-by-side with one extending till page width?

问题描述

我需要按以下方式创建两个div:

What I need is two divs in following fashion:

[内容宽度] [------------------页面剩余宽度----------------------------]

[-width-of-content-][------------------remaining-width-of-page----------------------------]

我记得在过去，通过使用表来进行此操作很容易.但是现在表是禁忌，那么如何使用div来实现呢?我已经花了数小时试图弄清楚这一点！

I remember how in olden days it was a breeze to do this by using tables. But now tables are taboo, so how do I achieve this with div? I have been spending hours trying to figure this one out!

<div style='float:left;display:inline-block'> Hello</div>
<div style='float:left;width:100%''> THIS DIV BREAKS</div>

推荐答案

您只需要浮动左元素.

HTML

<div id="left">Hello yoyoyoy jrllo hello blah blah</div>
<div id="right"></div>

CSS

#left,#right{
    height:50px;
}

#left{
    background:red;
    float:left;
}

#right{
    background:green;
}

https://jsfiddle.net/qb3374ou/

右div与内容..相同的结果 https://jsfiddle.net/qb3374ou/1/

right div with content.. same result https://jsfiddle.net/qb3374ou/1/

这篇关于如何并排创建两个div，其中一个延伸到页面宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！