标签: css-float

是否可以使用css将对象浮动到图像上？我想在图像上放置一个表单(不是背景).Float不起作用,但是有一些变量可以提供这个功能吗？

浮动对象时,它会将文本推送到对象的任一侧.我正在寻找的东西是不会做到这一点的,只会漂浮而不考虑它下面的东西.

HTML:

<div class="imgcontainer">
    <ul>
            <li><img src="1.jpg" alt="" /></li>
            <li><img src="2.jpg" alt="" /></li>
            .....
    </ul>
</div>  

我通过创建无序列表编写一个简单的图库页面,它的每个列表项都包含一个图像.

    ul li {
        float: left;
    }

我将容器的宽度设置为"max-width",这样我就可以使列表项(图像)适合浏览器宽度..这意味着当浏览器窗口重新调整大小时,它们将被重新排列.

    .imgcontainer{
        max-width: 750px;
    }

现在问题是那些图像或列表项没有对齐到中心,它们对齐到.imgcontainer体的左侧(在下面的附加链接中为灰色),当窗口重新调整大小时在右侧留下空格!

每次窗口调整大小时,如何将这些图像居中？

这是您可以在JS Bin上预览或编辑的整个页面/代码

http://jsbin.com/etiso5

我想创建一个"记分卡"网格来输出一些数据.如果每个div.item中的数据都是相同的高度,那么每个div.item上留下一个简单的浮点数会提供一个漂亮的均匀布局,可以根据浏览器大小很好地扩展和缩小.

但是,如果数据是可变的,每个div中的行数不同,那么元素浮动的方式会产生不均匀且混乱的输出.请参阅下面的代码示例 如果您使用以下内容创建页面,请将浏览器的大小调整为大约800px宽,以便框1,2和3在顶部创建"行",然后是4,5和6.如何将7下拉到下一行所以它创建一行以及8和9？

显然,如果你调整浏览器的大小以便每行显示4个div,则数字9是我想要在5以下分解的元素.有什么明显的东西我缺少或者我需要使用一些Javascript来实现这一点吗？

div.item{
  float:left;
  width:220px;
  background-color:#DBDBDB;
  margin:8px;
}

h1, p{
  padding:4px;
  margin:0;
}

<div class='item'>
  <h1>1</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>2</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>3</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

最近我点了一篇关于CSS z-index属性的有趣文章.我发现它是因为我正在寻找一个答案,为什么来自前一个div的溢出文本显示在后面div的背景上方但不在下面div中的span的背景之上,就像这里(jsfiddle):

#overflowed {
  background-color: green;
  width: 300px;
  height: 100px;
}
#non-floated {
  background-color: pink;
  width: 300px;
}
#non-floated span {
  background-color: yellow;
}

对此的解释是浏览器以特定顺序绘制元素,这是基于所谓的堆叠顺序:

因此,对于布局中的根元素和每个定位元素,浏览器创建这样的堆叠顺序,然后绘制所有这些订单,对不起双关语,相应的顺序.

所以这就是内联元素和文本(创建内联框的那些)被绘制在块级元素之上的原因,即使这些块元素稍后出现在文档中,就像我上面的jsfiddle一样.

所以问题本身.

我仍然无法找到答案为什么这些内联框,如果它们被创建,内联元素和浮动元素内的文本不是根据上面的堆叠顺序的方案与浮动元素之外的其他内联框绘制,就像这里(jsfiddle):

#overflowed {
  background-color: green;
  width: 300px;
  height: 100px;
}
#floated {
  background-color: pink;
  width: 300px;
  float: left;
}
#floated span {
  background-color: yellow;
}

在这里你可以清楚地看到,文档中第一个div的文本(未浮动)是在span的黄色背景上方(之后)绘制的,而span是内联元素,并且根据上面的堆叠顺序的图像应该在浮动容器(其背景和边框)之后绘制.

那么有人对此有一个可靠的解释吗？我认为浮动元素可以创建类似于自己的堆叠顺序的东西,就像定位元素那样,但我还没有在网上找到任何提及.

类似于选择img[title="test"]我可以选择哪种风格属性float设置为left？

我想为它们设置左边距和下边距,这些边距不适用于右浮动图像.

谢谢.

这个看起来像webkit中的文本换行错误,还是我错过了什么？

DOM:

<div>
  <p>
    <img src="http://static.jsbin.com/images/favicon.png">
    no sea takimata sanctus estestest Lorem ...
  </p>
</div>

CSS:

div {
  width: 200px;
}

p {
 margin-right: 32px;
 padding-left: 30px;
}

img {
 float: left;
 margin-left: -30px;
}

演示:http://jsbin.com/onoced/1/edit

截图:

img使用display: blockCSS属性从内联块元素转换为块对象有什么缺点吗？

大多数时候,我希望它们成为block元素.inline我失去的任何有用的方面？(也许我没有看到一些有用的东西？)

是否应该将所有图像block默认转换为元素？为什么根据规范它们是内联块元素？

PS我想通过定位和浮动以及周围元素来考虑布局.

我需要使用Boostrap做这样的事情.页面上有"流畅"内容,里面有两个小部件 - 首先在右上角,第二个在左下角.

Widget1很简单 - 我只需要class ="pull-right".但是如何处理第二个将它放到页面底部以保持"内容"浮动？

style="bottom:0;"不起作用:拥有此代码

<div class="container-fluid">
  <div class="row-fluid">
    <div class="offset1 span8 pull-right">
    ... Widget 1...
    </div>

    <div class="offset1 span8 pull-left" style="bottom:0;">
    ... Widget 2...
    </div>

    .... a lot of content ....

  </div>

</div><!--/.fluid-container-->

我有这样的结果:

移动小部件2也无济于事:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="offset1 span8 pull-right">
      ... Widget 1...
    </div>
      .... a lot of content ....
   <div class="span8 pull-left" style="bottom:0;margin-left: 0;">
      ... Widget 2...
   </div>
  </div>
</div><!--/.fluid-container-->

任何想法如何做到没有脏黑客(例如我可以使用JavaScript来修复Widget2位置)？

或者(好吧,好吧)和他们一起？

我正在修改自定义网格,并想看看其他人是如何创建他们的网格系统的.由于twitter的bootstrap似乎如此受欢迎,我看了它的代码.现在我想知道为什么他们使用花车？我会使用display: inline-block;html元素display: inline;或者display: block;我会尽量避免浮动.但由于某些原因,bootstrap创建者决定使用浮动.首先我认为他们使用它们具有向后兼容性,因为ie6不支持display: inline-block;并且ie7仅支持display: inline;默认情况下的元素.但是ie6或多或少地退出游戏,因为他们使用微清晰黑客,它使用*zoom:1; 目标ie6 + IMO他们可以复制相同display: inline-block;的*display: inline; *zoom: 1;所以最后的问题为什么浮动显示内联块？他们试图解决的问题我上面没有提到过吗？

我有一个包含四个div的容器(宽度未知),如下所示:

| Div1 | Div2 ............... | .............. Div3 | Div4 |

最左边和最右边的div(Div1/Div4)是固定宽度; 这是最简单的部分.

Div2/Div3的宽度是未知的,我想避免为它们设置一个固定的宽度,因为根据内容可以比另一个宽得多(所以我不能只是让每个人使用50%的可用空间)

我希望浏览器自动计算Div2/Div3的宽度,然后如果剩下剩余空间,它们应该伸展以填充任何剩余空间(剩下的空间如何在Div2/Div3之间分割并不重要)

我现在接近这个的方式是:

• Div1向左浮动(或绝对定位)
• Div4向右浮动(或绝对定位)
• Div2的左边距等于Div1的宽度(已知)
• Div3的边距等于Div4的宽度(已知)

我的问题是,如何让Div2和Div3拉伸以填充剩余的可用宽度？我猜一个选项是使用display:table,另一种可能是flex-box.还有其他选择吗？

更新:编辑清晰.

更新2:请注意,我不能假设Div2和Div3每个都应获得50%的可用空间.这在问题中明确说明,但不知何故,我不断得到基于这个假设的答案.