标签: css-float

我有一些文本，周围漂浮着两个图像：

<!--This is obviously a simplified version, there are other styles needed for the images below-->
<div id="wrapper">
    <h2>Title</h2>
    
    <figure id="image1" style="float: left">
        <img />
        <figcaption>Caption</figcaption>
    </figure>
    
    <figure id="image2" style="float: right">
        <img />
        <figcaption>Caption</figcaption>
    </figure>
    
    <p>Lorem Ipsum</p>
</div>

它是这样的：

我想要的是将第一张或第二张图像放置在段落的最底部。像这样的东西（用 Photoshop 制作）：

我显然无法设置position: absolute，因为文本将不再漂浮在图像周围。

我无法将包装器显示为 a flexbox，因为它将元素对齐一行（或多行）并破坏所有内容：

我什至尝试将包装器显示为 atable并使用 将图形对齐到底部display: table-cell; vertical-align: bottom，但在这种情况下浮动不再起作用并且图形与中心对齐。

我设法得到的唯一部分解决方案是clear: both在图中使用：

这样做的问题是，当调整页面大小时，段落的高度会发生变化，图像不再位于其底部。

我能在 SO 上找到的唯一类似的答案是这个，但它在我的情况下不起作用，因为我事先不知道段落高度。

有什么想法让它发挥作用吗？提前致谢。

我需要并排放置2个div.但更重要的是,我希望在IE6/7中正确显示.我已经设法用Firefox取得了成功.我的代码:

#container{
    padding:10px;
}

#left{
    float:left;
    width:500px;
}

#right{
    width: 300px;
    float:right;
    padding:7px;
    background-color:#F0FCEB;
}

<div id="box"> 
<div id="left">Some content here</div> 
<div id="right">Some content here 2</div>
<div style="clear:both;"></div>
</div>

结果如下所示:

期望输出(FF输出):

IE6/7输出: 如何在IE中摆脱这种不必要的填充,还是有其他方法？注意:我使用jQuery和Nifty来创建圆角.

我有一个搜索页面,其中包含搜索文本框和一个类似于谷歌的"高级搜索"链接.

我无法集中文本框并且在文本框的右侧有"高级搜索".

基本上我希望布局看起来像谷歌http://www.google.com/'>看到这里

这是我的镜头:

            <div style="width:650px; margin-right:auto; margin-left:auto;">
                <%= Html.TextBox("SearchBar")%>
            </div>
            <div style="width:90px; float:right;">                    
                <a href="#" style="text-decoration:none">Advanced Search</a>
            </div>

使用CSS,格式化左侧带有图标和右侧文本的框的最简洁,最简单的方法是什么:

  [Icon]   Text text text
  [____]   and more text
           and some more text

到目前为止,我已经使用<div class=icon”>并div.icon { float: left; }放置了文本左侧的图标,但"还有一些文本"流向左侧(图标下方)而不是留在一个漂亮的实心列中.

PS:我不想使用表格.

如何为Mozilla Firefox编写单独的样式表

更新2:

我不能在div内浮动一个跨度..

<div class="noselect" id="teach_create_pageheader">
<span class="teach_create_pageheader_back"></span>
   Step 1
<span class="teach_create_pageheader_forward"></span>
</div>

这是我的CSS.我希望它们向左浮动并相应地向右浮动.

#teach_create_pageheader{
width:880px;
height: 30px;
margin: -10px;
padding-top: 5px;
background-color: gray;
font-size: 14px;
text-align: center;
font-weight: bold;
color: white;
-webkit-font-smoothing: antialiased;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
opacity:0.8;
filter:alpha(opacity=80);
}

.teach_create_pageheader_back{
    float: left;
    margin-bottom: 5px;
}

.teach_create_pageheader_forward{
    float: right;
    margin-bottom: 5px;
}

span {
display: block;
}

我用这个代码让JQuery制作按钮(以及其他按钮):

(function($){

// Creating the jQuery plugin:
$.fn.sweetPages = function(opts){

// If no options were passed, create an empty …

我知道这个问题可能是12324次,但我仍然找不到任何可靠的答案:/

以下是示例代码:http: //tinkerbin.com/c0wqtfSa

根据浮动图像,换行应采用自动高度,但如何？:/

非常感谢!!!

ps,我不能添加任何额外的div,如"clear:both",它应该是只有css的解决方案

说我有一个500px的ul.说孩子李是漂浮的.有没有办法写css所以li永远不会去第二行但是根据有多少li来填充ul的500px宽度？

例如.

<ul>
   <li>test</li>
</ul>

李将占用整个500px

<ul>
   <li>test</li>
   <li>test</li>
</ul>

2 li会分开宽度.基本上每个250px

<ul>
   <li>test</li>
   <li>test</li>
   <li>test</li>
</ul>

会分三种方式......

谢谢!

我的浮动工作......有点......我在调整浏览器大小时遇到​​问题.当屏幕变小时,我希望文本环绕div,但是它只是在一长行文本中向右压缩到底部.

这是一些照片.

这是它更广泛的时候

然后,当我调整浏览器大小时,这就是它正在做的事情

我的html看起来像这样

<div class="info">
    <div class="userInfo">
        <p>info here</p>
        <img>
    </div>
    <div class="bio">
        <p>paragraph</p>
        <p>paragraph</p>
        <p>paragraph</p>
    </div>
</div>

我的css看起来像这样

.userInfo{
    float: left;
}

.bio p{
    padding-left: 14em;
}

这是我的jsfiddle显示我的尝试:

HTML:

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

</div>

CSS:

#container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow-x: auto;
}

.box {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

我希望/希望这个用水平滚动条创建一个长行.相反,boxes到达第二行时到达第二行container.我希望他们继续前进.我怎么能做到这一点？