相关疑难解决方法(0)

我想要一个双列div布局,其中每个都可以有可变宽度,例如

div {
    float: left;
}
.second {
    background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

我希望'view'dec扩展到'tree'div填充所需空间后可用的整个宽度.目前我的'view'div被调整为它包含的内容.如果两个div占据整个高度也会很好

不重复免责声明:

当float:left设置时,将div扩展到max width, 因为左边的一个具有固定的宽度.

帮助div - 使div适合剩余的宽度, 因为我需要两个向左对齐的列

我有2个div:一个在左侧,一个在我的页面右侧.左侧的那个有固定的宽度,我希望右侧的一个填充剩余的空间.

    #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #ffffff;
    }
    #navigation {
        width: 780px;
        float: left;  
        background-color: #A53030;
    }

<div id="search">Text</div>
<div id="navigation">Navigation</div>

对不起有点垃圾的标题.我想不出如何更好地描述这个.

我正在尝试在我的网站上实施Google Friend Connect会员小工具(刚刚进入该计划并希望在没有重大重新设计的情况下将其放入,至少为了测试而起).

我的问题如下:

我有一个容器div,其宽度为主页面(正文)的90%.在这里我向右浮动div并将其宽度设置为300px并将google小工具放入其中.我想要的是能够在谷歌小工具div的左侧剩余95%的空间填充.

我不知道是否可以将px和%与div和width混合.

我希望这是有道理的.

谢谢

我有这个标题栏.

<div id="header">
        <div class="container">
            <img src="img/logo.png"/>
            <div id="searchBar">
                <input type="text" />
            </div>
            <div class="buttonsHolder">
                <div class="button orange inline" id="myAccount">
                    My Account
                </div>
                <div class="button red inline" id="basket">
                    Basket (2)
                </div>
            </div>

        </div>
    </div>

我需要searchBar来填充div中剩余的差距.我该怎么做？

这是我的CSS

#header { 
    background-color: #323C3E;
    width:100%;
}

.button {
    padding:22px;
}


.orange {
    background-color: #FF5A0B;
}

.red {
    background-color: #FF0000;
}

.inline { 
    display:inline;
}

#searchBar {
    background-color: #FFF2BC;
}

这是代码:

<div style="width:400px">
    some text..
    <input type="text" />
    <button value="click me" />
</div>

如何使输入元素展开以填充所有剩余空间,同时保持在同一条线上？如果我把它100%放到它自己的线上......

假设我使用display: flex;(demo)设置了一个简单的三列布局.在左列和右列中,我有指定宽度的图像(100px每个).在中间栏中,我有主要内容区域.此区域具有高分辨率图像:

<div id="main-container">

    <div id="left-content">
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
    </div>

    <div id="center-content">
        <div><img src="https://farm6.staticflickr.com/5560/14080568109_9f33dc7964_o.jpg"></div>
    </div>

    <div id="right-content">
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
    </div>
    </div>

</div>

我需要调整CSS,以便中心列宽度最多是侧列之间可用空间的100%(换句话说,它必须始终是这样宽:windowSize-column1-column2).如果窗口缩小,我需要中心列(及其图像)随之缩小.

#main-container
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

#left-content,
#right-content
    {
    width: 102px;

    border-style: solid;
    border-width: 2px;
    border-color: magenta;
    }

#left-content img,
#right-content img
    {
    width: 100px;
    }

#center-content
    {
    }

#center-content img
    {
    max-width: 100%;
    height: auto;
    } …

我有一个父div和2个div.第一个儿童div是50px宽和100%高度.第二个孩子div是100%身高,我要采取宽度的其余部分(100% - 50px)我该怎么做？

这是我创建的小提琴:http://jsfiddle.net/muGty/ 基本上我希望蓝色div(右)完全占据灰色容器的其余部分.

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

我有以下HTML代码:

<div class="a">
    <div class="b">
        <a href="#">text</a>
    </div>
    <div class="c">
        text
    </div>
</div>


div.a
{
    margin-top: 10px;
    clear: left;
    float: left;
    width: 100%;
    text-align: center;
}

div.b
{
    padding: 27px 10px 7px 10px;
    background-color: #fff;
    overflow: hidden;
    float: left;
}

div.c
{
    float: left;
}

我应该为div.c设置哪些样式,使其在div.b旁边并适合剩余的宽度？

这是一个适合100%屏幕的tempalte.

谢谢!