Tag: css float
CSS来停止图像下方的文字环绕
我有以下标记： <li id="CN2787"> <img class="fav_star" src="images/fav.png"> <span>Text, text and more text</span> </li> 我想这样做，如果文字换行，它不会进入图像的“列”。 我知道我可以用table （我正在做的）做到这一点，但是由于这个原因，这是不可行的。 我已经尝试了以下没有成功： li span {width: 100px; margin-left: 20px} .fav_star {width: 20px} 我也尝试了float: right 。 谢谢。 编辑：我想它看起来像这样： IMG Text starts here and keeps going… and wrap starts here. 不是这样的： IMG Text starts here and keeps going… and wrap starts in the space […]
将DIV堆叠在一起？
是否有可能堆积多个DIV： <div> <div></div> <div></div> <div></div> <div></div> </div> 那么所有这些内部DIV都有相同的X和Y位置？ 默认情况下，它们都会按照最后一个DIV的高度增加Y位置。 我有一种浮动或显示或其他技巧可以咬一口的感觉？ 编辑：父DIV有位置相对，所以，使用绝对位置似乎并不工作。
浮动权利和绝对位置不一起工作
我想要一个div总是在它的父div的权利，所以我使用float:right 。 有用。 但是我也希望插入时不会影响其他内容，所以我使用position:absolute 。 现在float:right不起作用，我的div总是在它的父div的左边。 我怎样才能把它移到右边？
CSS浮动 – 我怎么让他们在一条线？
我想要在左边的项目中使用'float：left'在同一行上有两个项目。 单独实现这一点我没有任何问题。 问题是， 即使调整浏览器的大小 ，我也希望这两项保持在同一行。 你知道…就像桌子一样。 我们的目标是保持右侧的物品不受任何包装的影响。 所以如何使用CSS告诉浏览器，我宁愿伸展包含的div，而不是包装它，以便float: right; div低于float: left; DIV？ 例如：我想要什么： \ +—————+ +————————/ | float: left; | | float: right; \ | | | / | | |content stretching \ Screen Edge | | |the div off the screen / <— +—————+ +————————\ /
如何垂直中间alignment未知高度的浮动元素？
我有一个（水平）居中的外部div包含两个未知宽度的元素： <div style='width:800px; margin:0 auto'> <div style='float:left'>…</div> <div style='float:right'>…</div> </div> 两个花车默认都是顶部alignment的，并且具有不同的/未知的和不同的高度。 有没有办法让它们垂直居中？ 我最终做出了外部的股利 display: table 和内部的divs display: table-cell; vertical-align: middle; text-align: left/right; 但我只是好奇，如果有一种方法来与浮游物做这个。
为什么CSS浮动不改变以下div的宽度？
正如我所理解的float:left ，它会将后面的元素向左推，而不是在新行上。 在下面的示例中，我期望第二个div从第一个div的右边开始，但是在下面的jsfiddle中可以看到，它仍然跨越整个宽度。 另一方面，内容神奇地开始在它应该的地方。 float规则只浮动的内容，而不是边距？ 这里的例子 .inline { float:left; } .yellow { background-color:yellow; } <div class="inline"> first line<br> second line<br> third line<br> </div> <div class="yellow" >floated div</div> 编辑：我期望上面的代码看起来像这样，但没有明确的需要使用边距。
如何在纯CSS中创build相等高度的列
如何让你的div达到一路下降？ 如何填补父div的垂直空间？ 如何获得等长的列而不使用背景图片？ 我花了两天的时间search并parsing代码，以了解如何尽可能简单高效地完成等长列。 这是我想出来的答案，我想在一个小教程中与社区复制和粘贴样式分享这些知识。 对于那些认为这是重复的，事实并非如此。 我受到了几个网站的启发，其中包括http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks，但下面的代码是独一无二的。
如何使用CSS并排3个div
我知道如何使2个div并排浮动，只需将一个浮动到左边，另一个向右浮动。 但如何做到这一点与三个div或我应该使用表格为此目的？
使用display的好处：inline-block vs float：留在CSS中
通常情况下，当我们想在一行中有多个DIVs ，我们可以使用float: left ，但现在我发现了display:inline-block 示例链接在这里 。 在我看来， display:inline-block是连续align DIVs的更好方法，但是有什么缺点吗？ 为什么这种方法比float技巧更不受欢迎？
浮动：左; vs display：inline; vs display：inline-block; vs display：table-cell;
我的问题 这些方法中的任何一种都是专业网页devise师的首选吗？ 在绘制网站时，是否有任何这些方法是由networking浏览器提供的？ 这全是个人喜好吗？ 还有其他的技术我错过了吗？ 注意：以上问题涉及devise多列布局 浮动：左; http://jsfiddle.net/CDe6a/ 这是我创build列布局时总是使用的方法，它似乎工作得很好。 虽然父母自己也崩溃了，所以你只需要记住clear:both; 之后。 我刚刚发现的另一个问题是无法垂直alignment文本。 显示：内联; 这似乎纠正了崩溃的父母的问题，但增加了空白。 http://jsfiddle.net/CDe6a/1/ 从html中删除空格似乎是最简单的解决这个问题，但如果你真的挑剔你的HTML是不希望的。 http://jsfiddle.net/CDe6a/2/ 显示：内联块; 似乎行为完全像display:inline; 。 http://jsfiddle.net/CDe6a/3/ 显示：表细胞; http://jsfiddle.net/CDe6a/4/ 完美的作品。 我的想法： 我确定我错过了一大堆东西，比如某些会破坏布局的exception，但是display:table-cell; 似乎工作最好，我想我会开始取代float:left; 因为我似乎总是弄得clear:both; 。 我已经在网上阅读了很多关于这方面的文章和博客，但是在布置我的网站时，他们没有给我一个明确的答案。
