标签: css-float
Google Chrome 中奇怪的不一致渲染
当我在 Chrome 中查看此网页时
https://www.doctle.com/users/feedback/
它呈现不一致。
问题出在右上角的登录小部件上。有时它会按预期呈现，如果我刷新它，有时它不会正确浮动。
要重现不稳定的行为，只需重复刷新页面，您就可以看到不一致的情况。
[不稳定的渲染] - https://www.doctle.com/error.jpg
请帮忙。屏幕截图是同一页面，服务器端文件没有任何差异。我在 Firefox 中验证过，不存在这种不一致的情况。在 Firefox 中打开该页面以供参考。
提前致谢。
推荐指数
解决办法
查看次数
使用 CSS 属性“float”在 HTML 中浮动 div 时遇到问题？
我的 div 有问题。我目前在 html 中有四个 \xe2\x80\x9cdivs\xe2\x80\x9d ，如下所示。我想要做的是将页面中的所有内容放在 \xe2\x80\x9cpage\xe2\x80\x9d div 内。在 \xe2\x80\x9cmain\xe2\x80\x9d div 内，我有 \xe2\x80\x9ccontent\xe2\x80\x9d 和 \xe2\x80\x9cside\xe2\x80\x9d div 并且都有 \xe2 \x80\x9cfloat:来自 CSS 的 left\xe2\x80\x9d 属性。\xe2\x80\x99s 高兴的是，当我这样做时，我失去了 \xe2\x80\x9cpage\xe2\x80\x9d div 的白色背景。我怎样才能防止这种情况并创建我的内容和侧边 div？我知道这很容易，但由于某种原因我\xe2\x80\x99m 没有得到正确的结果。任何帮助将不胜感激。
\n\n谢谢
\n\n<div id=\xe2\x80\x9dpage\xe2\x80\x9d>\n <div id=\xe2\x80\x9dcontainer\xe2\x80\x9d>\n </div>\n <div id=\xe2\x80\x9dmain\xe2\x80\x9d>\n <div id=\xe2\x80\x9dcontent\xe2\x80\x9d>\n </div>\n <div id=\xe2\x80\x9dside\xe2\x80\x9d>\n </div>\n </div>\n</div>\n这是我的 CSS 代码
\n\n#page \n{\nmargin: 2em auto;\nmax-width: 1000px;\nbackground-color:#fff;\n}\n\n#main\n{\nclear: both;\npadding: 1.625em 0 0;\nwidth:700px;\n}\n\n#content \n{\nclear: both;\npadding: 1.625em 0 0;\nwidth:740PX;;\nfloat:left;\n}\n\n#side\n{\nwidth:250px;\nmargin:5px;\nfloat:left;\n}\n推荐指数
解决办法
查看次数
浮动右侧元素与底部 CSS 对齐？
这是我的设置：
我有一个评论容器 div。在这个 div 中，我还有三个 div。两种是左浮动，一种是右浮动。
这 3 个 div 周围有圆角边框。我认为很容易分辨出上图中哪些是向左浮动和向右浮动。
在三个浮动的div之后，还有一个看不见的“清晰”的div，
<div style="clear:both; border:none;"></div>
我的问题是，我似乎无法找到一种方法让“一些测试信息”div 一直滑动到我的评论底部（这样它的底部就在“清晰”div 的顶部正上方。
推荐指数
解决办法
查看次数
在div中居中浮动图像
我试图在我的页面上居中浮动图像，但我无法让它工作。这是我的代码
.imcontainer {
text-align:center;
display:inline-block;
}.float {
float: left;
font-size: small;
height: auto;
margin: 5px 7px 0 3px;
width: auto;
}
HTML
<div class="imcontainer">
<div class="float"><img width="70px" height="70px" src="image.jpg"></div>
<div class="float"><img width="70px" height="70px" src="image.jpg"></div>
<div class="float"><img width="70px" height="70px" src="image.jpg"></div>
<div class="float"><img width="70px" height="70px" src="image.jpg"></div>
<div class="float"><img width="70px" height="70px" src="image.jpg"></div>
</div>
我该如何解决这个问题？
推荐指数
解决办法
查看次数
Div元素不会在css中换行
ID=content 的 Div 标签不会换行。它会像这样进入标题行。
谁能解释一下为什么会这样？？，以及如何将其放在新行中？
<html>
<head>
<title> Home Page </title>
<style>
#wrapper
{
width:70%;
margin: 0 auto;
}
#header .Nav
{
width:60%;
float:right;
}
#header .Nav ul a
{
margin: 0 3%;
float:right;
text-decoration:none;
}
#header .logo
{
width=40%;
float:left;
}
.title
{
float:left;
width:30%;
}
.main_content
{
float:right;
width:70%;
}
</style>
</head>
<body>
<div id="wrapper" >
<div id="header">
<a href="/" class="logo"><img src="./logo.gif" alt="Zach Woomer" /></a>
<div class="Nav">
<ul>
<a href="./contact.htm">Home</a>
<a href="./contact.htm">About US</a>
<a href="./contact.htm">Products</a>
<a href="./contact.htm">Contact US</a> …推荐指数
解决办法
查看次数
<div>s 浮动/覆盖在 css 中的其他元素之上
这个问题是指我在这个地址的网页：http : //www.acehscmaths.com/welcome/testhome
当您单击“图表”菜单选项（在顶部右侧的徽标旁边）时，它会下拉更多菜单选项，然后将整个页面向下推。有没有人可以将 CSS 设置应用于这些下拉元素，以便它们覆盖在现有内容之上（以免将整个页面向下推）。
我不确定我应该复制哪些代码，所以我刚刚复制了有问题的特定菜单：
<div class="col-md-3">
<div class="side-bar-wrapper collapse navbar-collapse navbar-ex1-collapse">
<ul class="side-menu">
<li>
<a href="charts.html" class="is-dropdown-menu">
<span class="badge pull-right"></span>
<i class="icon-bar-chart"></i> Charts
</a>
<ul>
<li>
<a href="charts.html#area_chart_anchor">
<i class="icon-random"></i>
Area Chart
</a>
</li>
<li>
<a href="charts.html#circle_chart_anchor">
<i class="icon-bullseye"></i>
Circular Chart
</a>
</li>
<li>
<a href="charts.html#bar_chart_anchor">
<i class="icon-signal"></i>
Bar Chart
</a>
</li>
<li>
<a href="charts.html#line_chart_anchor">
<i class="icon-bar-chart"></i>
Line Chart
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="side-bar-wrapper collapse navbar-collapse navbar-ex1-collapse">
<ul class="side-menu">
<li> …推荐指数
解决办法
查看次数
垂直对齐图像右侧的文本
图像左侧有许多垂直对齐文本的示例，但是如果我尝试将文本放在图像的右侧，这些示例将不起作用。
图像左侧文本的工作示例是这样的：http : //jsfiddle.net/rVTcv/
HTML：
<div style="height:259px;" class="how-right">
<img src="img/how-it-works/num-1.PNG" width="267px" height="259px">
<span>JivaWay has a simple system to get you in shape in just 6 weeks. And it's so easy to follow, even people who have never exercised before can do it.</span>
</div>
CSS：
.how-right img {
float:right;
margin-left:20px;
vertical-align:middle;
}
span {
height: 259px;
display: table-cell;
vertical-align: middle;
}
如果我尝试通过将float:right图像的属性移动到文本来移动右侧的文本，那么我不会得到预期的结果。
推荐指数
解决办法
查看次数
清除浮动 div（清除：两者；不起作用）
我有一个网站，我正在通过学校参加比赛，但我在清除浮动元素方面遇到了问题。
该网站托管在http://www.serbinprinting.com/corey/development/
我所指的区域是页面底部的成分列表。我希望它所包含的 div 根据框中的内容调整其高度，但是我将不得不使用当前浮动的列，因此内容不会位于 div 的流中。
我曾尝试将一个 :after 元素与 clear:both 和 display: 块添加到列表以及它所包含的 div 中，但没有成功。可以实现不浮动的两列布局吗？我对清除有什么不正确的做法吗？
这是围绕这个问题的代码......
HTML
<section id="monthly_recipe">
<div class="content_container">
<div class="centered">
<img src="images/icons/bread41.png">
<h1>Gluten-Free Bread That Doesn't Suck</h1>
</div>
<div class="col-1">
<ul><a href="http://www.onegoodthingbyjillee.com/2013/03/finally-gluten-free-bread-that-doesnt-suck.htmlhttp://www.onegoodthingbyjillee.com/2013/03/finally-gluten-free-bread-that-doesnt-suck.html"></a>
<li>4 cups Brown Rice Flour Blend </li>
<li>1 tablespoon xanthan gum</li>
<li>1 tablespoon gluten-free egg replacer</li>
<li>2 teaspoons salt</li>
<li>½ cup powdered milk</li>
<li>3 large eggs at room temperature</li>
<li>¼ cup butter at room temperature</li>
<li>2 teaspoons cider vinegar</li>
<li>? cup honey</li>
<li>1 …推荐指数
解决办法
查看次数
如何让较小的 div 堆叠在较大的 div 的右侧？
我想在下面绘制的排列中布置一些 div。它是两个并排的方形块，然后是垂直排列的 2 个半高块，其中第三个大块可能适合。
+---------+ +---------+ +---------+
| BOX1 | | BOX2 | | BOX3 |
| | | | +---------+
| | | | +---------+
| | | | | BOX4 |
+---------+ +---------+ +---------+
到目前为止，我已经接近的唯一方法是创建 3 个左浮动框并将两个较小的框放在第三个浮动框中。这对我来说感觉不对。就像，我添加额外的 div 只是为了控制布局。也许那没问题，但感觉不对。
在这里看到它：
https://jsfiddle.net/a84kv4wo/1/
+---------+ +---------+ +---------+
| BOX1 | | BOX2 | | BOX3 |
| | | | +---------+
| | | | +---------+
| | | | | BOX4 |
+---------+ +---------+ +---------+
.big_box {
height: 8em;
width: …推荐指数
解决办法
查看次数
为什么块元素表现得像内联元素？
:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
.navigation li {
list-style-type: none;
float: left;
padding: 1em;
}<ul class="navigation">
<li> <a href="#help"> Help </a>
</li>
<li> <a href="#about"> About us </a>
</li>
</ul>
<p>lorem ipsum</p>
<br/>
<p id="help"><b> Help yourself man </b>
</p>
<p id="about"><b> We're free software lovers </b>
</p>如果我们检查上面的代码片段（使用dev tool）ul和p元素都display:block在用户代理样式表下。什么都没有被应用element.style，他们都没有float:left
是的，float应用于li notul并且float:left从.navigation …
推荐指数
解决办法
查看次数