标签: css-float

我有两列布局,右侧有灰色侧边栏.当左列的高度增加时(由于内容被动态扩展),我需要侧边栏的高度扩展.我可以让侧边栏适合静态页面,但我无法通过页面的其余部分来增加它的大小.做了一些谷歌搜索,但找不到适合我的解决方案.

有谁知道如何做到这一点？

直到现在,当我有一行示例时

上一页---页面宽度---下一页

我使用了一个带有2个孩子的容器div,样式为float:left&float:right

我认为它可以从一个段落行完成,其中span可能是这样的:

<p><span class="s-left">previous</span><span class="s-right">next</span></p>

我试过CSS:

span.s-left { text-align: left; }
span.s-right { text-align: right; }

但那没有做到..

这真的很烦我,我试过找一个解决方案,但无济于事.在我的网站的标题中,您可以看到搜索栏位于徽标下方,我只想在标题的最右侧.这似乎是一个简单的修复,但我无法解决这个问题.

这是HTML

<div id="header">
<div id="logo">
<a href="http://www.otherwords.info/index.php"><img src="images/otherwordslogo.jpg" /></a>
</div>
<div id="search">
<span>
<form method="post" action="search.php?op=Search" id="form">

<input type="text" value="Search Phrase" onfocus="if(this.value == 'Search Phrase'){this.value = '';}" size="40" name="q">

<input type="submit" value="Search" name="submit">

</form>
</span>
</div>
</div>

这是CSS

#search { float:left;}

#logo { float:left; }


div#header {
    vertical-align:top;
    width:100%
    clear: both;
    height: 150px;
    background-color: aqua;
    padding: 1px;


}

我试图在这张图片中设置四个div.

我尝试过使用float:left但是我要么把所有的div都放在Div1的右侧,要么所有的div都被卡在Div1下面.我相信我需要做clear某个地方,是吗？

NB.Div2和Div3可能有不同的高度.

更新.
谢谢你到目前为止的答案,他们几乎是我需要的.要添加问题,当DivContainer没有固定宽度时,是否可以获得此外观？

我认为这已被问了一百万次,但对问题的定义不同.它可能要么很容易修复,要么是网页设计师的长期愿望,但仍然没有答案.注意:我确实在堆栈上对css float进行了搜索,但是虽然有些看起来像我的问题,到目前为止我还没有找到类似的问题.

如果你看到附件,我想要做的就会变得清晰.我希望它们排成3排,整齐地堆叠在一起,每个<li>项目的高度都不同.换句话说:<li>一行中最高的元素是前导,下一行的项目应该包含在这一行中.现在,新行上的项目会在开头撞到较长列表项的内容,从而阻止新行的第一项完全浮动到左侧.

请注意,我不想用php或js来解决这个问题,我认为纯粹的css解决方案必须在那里...因为使用php,我当然可以添加类似"new-row"的类并应用一个clear: both它,它将包装.如果我想在CSS中做同样的事情,那么我不能没有使用支持不当的:nth-of-type东西.此外,内容块的宽度可变,因此有时连续3个,有时可能只有2个或最多6个.

谁可以帮忙？

我有一些HTML代码,所以:

<div class="ui-tabs-panel">
    <div class="dataTables_wrapper">
        <div>
            <button>Add Whatever</button>
        </div>
    </div>
</div>

与定位有关的应用样式是:

ui-tabs-panel { 
     display: block; 
} 
dataTables_wrapper: {
    clear: both, 
    position: relative;
}  
my_button div: ?  
my_button: ?

外部div是一个jQuery选项卡面板; 中间div是一个精简的jQuery数据表表.我希望我的按钮右对齐,并在标签边框内.我尝试了一些事情.将这些样式应用于按钮本身:
1. float:right右对齐,但在选项卡边框外.
2. position: absolute也会跳到标签边框之外.
3. right: -91%当屏幕最大化时看起来很棒,但是当我调整较小时,开始切断按钮的右边缘.(按钮的宽度恒定.)
4. margin-left: 91%做同样的事情.

我尝试将a float: right应用于容器div,并且仍然将其粘贴在选项卡面板之外.

我可以处理resize事件,并重新计算其中正确属性的百分比值,但这让我感到震惊,因为它绕过了隔壁.在css中执行此操作的正确方法是什么？

我问过一个关于绝对和相对div定位的早期问题,但我想尝试理解(肯定)float在这种情况下的作用.

我的主要问题是:如何float涉及到absolute和relative div定位是什么？

以下陈述是否正确(是/否):

1. float right(或left)将尝试div从right(或left)开始堆叠所有一个.如果没有足够的空间(width问题),divs将显示在下一个"行"(从上到下).
2. float不会影响absolute div,absolute覆盖float
3. relative div相对于第一个封闭位置relative div(absolute divs被忽略)
4. float right(或left)在div遗嘱上首先计算a 的自然位置relative div,然后添加任何左上角偏移量来计算最终位置.

谢谢.

我正在尝试使用CSS进行这种响应式设计.

当有足够的空间来显示整个长度时,它基本上应该是600px宽度.
如果没有,它会折叠,然后右侧部​​分出现在左侧部分的底部.
我正在努力如何归档这个.

这是DEMO,我可以走这么远
http://jsfiddle.net/a7Fkj/5/

HTML

<div class="table_row">
    <div class="left_partial">
        <div class="StoreName">Walmart Store</div>
        <div class="Location">Located in California</div>
    </div>

    <div class="right_partial">
        <div class="store_icon"><img src="https://twimg0-a.akamaihd.net/profile_images/616833885/walmart_logo_youtube.jpg"><div>
        <div class="person1">John Smith<div>
        <div class="person2">Mike Tailor<div>
        <div class="person3">Jessica Swan<div>
    </div>

</div>

CSS

div.table_row{
    min-width: 300px;
    margin-bottom: 30px;

}

div.left_partial{
    width: 300px;

}

div.right_partial{
    width: 300px;   
}

div.StoreName{
    background-color: #000000;
    color: #FFFFFF;
}

div.Location{

}

div.store_icon{
    width: 60px;
    height: 60px;
}

div.person1{

}

div.person2{

}

div.person3{

}

我想更好地了解浮子.我不明白这个问题.我曾经在少数情况下发生这种情况,但这是我最近的情况.我正在制作一个双列无序列表但是在垂直间距方面存在一些问题.

<ul>
<li width="50%"> a bunch of text</li>
<li width="50%"> a very large amount of text</li>
<li width="50%"> a small amount of text that does not line up with the first li</li>
</ul>

请参阅代码段以获得正确的演示.

.lists ul{
    width:500px;
}
li{
    width: 40%;
    float:left;
    padding-left:5%;
    padding-right: 5%;
}

<div class="lists">
    <ul>
        <li> <a href="#">harpoons sticking in near his starb</a></li>
         <li><a href="#"> aaalewent milling and milling round so, that my boat's crew could only trim dish, by sitting all thing and milling round …

在这里,我为每个标签创建了一个ul li列表.并为每三分之一添加内联属性.我想只使用CSS来使用条件.float:leftlifloat:none;li

 <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    ul
    {
        list-style:none;
    }
    ul li
    {
        margin-right:10px;
        float:left;
    }
    </style>
    </head>
    <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li style="float:none;">List 3</li>

    <li>List 4</li>
    <li>List 5</li>
    <li style="float:none;">List 6</li>

    <li>List 7</li>
    <li>List 8</li>
    <li style="float:none;">List 9</li>

    <li>List 10</li>
    <li>List 11</li>
    <li style="float:none;">List 12</li>

    <li>List 13</li>
    <li>List 14</li>
    </ul>
    <body>
    </body>
    </html>