标签: css-float

我有一个看起来像这样的页面:

<div>
<p> This text appears above the image</p>
<!-- I know the <div><p> construction is superfluous. I was just trying things out -->
</div>

<div style="display: block; width: 100%; clear: both;">

   <img class="left" alt="Img1" src="img1.jpg" alt="" width="242" height="181" />
   <img class="right" alt="Img2" src="img2.jpg" alt="" width="242" height="181" />

</div>

<div>
<p> This text appears between those images. I want it to display below them.</p>
</div>

每个图像都有这个CSS:

.left {
   float: left;
   margin-right: 5px;
}
.right {
   float: right;
   margin-left: 5px;
} …

我有一个jqGrid显示完全正常.

然后我开始开发一个基本的站点布局结构并遇到问题:jqGrid的标题变得非常庞大!:)

这是截图.

页面结构:

<div id="sidebar1" />
<div id="sidebar2" />
<div id="centralpart">
    <div id="jqgrid">....</div>
</div>

和css:

#sidebar1 {
  float: left;
  width: 150px;
  padding: 10px 10px;
}

#sidebar2 {
  float: right;
  width: 300px;
  padding: 10px 10px;
}

#centralpart {
  margin: 0 300px 0 150px;
  text-align: center;
}

我发现事情因浮动而破坏:一旦我删除它们,jqGrid的标题会恢复正常大小(尽管布局的其他部分搞砸了))

另外我注意到浮子标题正好向右侧边栏的高度调整,所以看起来它试图漂浮它......

我还尝试通过在jgGrid之前放置<br style="clear:both" />来清除浮动,但是它将它移到了侧边栏之外的页面底部,这不是我想要的.

我只是迈出了css/html/jqgrid的第一步,所以我可以错过一些非常明显的东西:-)

我目前正在研究 tumblr 主题，但卡在页面导航上。“上一个”和“下一个”按钮的 html 或仅呈现（如果可用）。所以第一页上没有下一个按钮，最后一页上没有上一个按钮。这就是我希望相应的单个按钮拉伸到 100% 宽度的地方。我可以在 javascript 中做到这一点，但它根本不是一个选项，因为模板也可以在没有 javascript 的情况下工作。

html 看起来像这样：

<div id="navigation">
<a href="#" id="prev" style="width:476px; float:left;" class="button_normal"><p>Prev</p></a>
<a href="#" id="next" style="width:476px; float:right;"class="button_normal"><p>Next</p></a>
</div>

CSS：

.button_normal {
text-align: center;
opacity: 0.55;
height: 30px;
line-height: 30px;
background: white;
font-size: 13px;
font-weight: 100;
color: #646464;
border: 1px solid #646464;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom: 10px;
}

#navigation{
clear: both;
width: 100%;
}

父 div 的宽度是 960px，所以两个按钮之间应该有 8px 的边距。我尝试用 min-width 和 width: 100% auto 修复它；但无法真正弄清楚如何制作它。

提前致谢。

我在Chrome中使用三个项目时遇到问题.基本上,它是左边的图像,右边有两个div.问题是严重浮动的潜水正在下降到图像的底部.这是Chrome中的已知问题,我该如何解决？在IE,Opera,Safari和Firefox中似乎没问题......

这是代码:

    <body>
    <div id="container">
        <div id="header">
            <img src="image1.gif" width="320" alt="Logo"/>
            <div id="social">
                <img src="images/facebook_logo.png" alt="Facebook logo" width="25" />
                <img src="images/twitter.png" alt="Twitter logo" width="25" />
            </div>

            <div id="review">
        <img src="roundel1.gif" alt="Click here!" style="float:left; width:50px;"/><div>
                    FREE service!
                </div>
            </div>
</div>
</div>
</body>
</html>

和CSS:

* {
  margin:0;
  padding:0;
}

body    {
    background-image:url(../images/greenbg.png);
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:120%;
    }
#container           {
    margin-left:auto; 
    margin-right:auto; 
    width:960px;
    background-color:#FFF;
}
#header {
    height:100px;
}
#header-image   {
    float:left;
}
/* flyout boxes */

#review {
    float:right; …

这将是主要标记:

<div class="mancha">
    <div class="logo"></div>    
    <div id="content-area" class="espacio">
             <div class="eltitular">HEADER</div>
             <div class="lacarta">LEFT CONTENT</div>
             <div id="sidebar">RIGHT CONTENT</div>
        </div>
</div>

哪里(虽然在链接中可以看到更多的规则,这是宽度)

.espacio{
    margin-left: 192px;
    background: transparent;
        width:808px !important
}
.lacarta{
        width:595px;
        float:left;
}
#sidebar{
        width:210px;
        float:right
} 

问题是.lacarta和#sidebar没有浮动在另一个旁边(这只发生在IE8或更低版本)

它可以在这里测试:http://goo.gl/ksFQI(如果你比较firefox/chrome你会看到侧边栏不在容器的右侧..)

我检查了IE8开发人员工具,该容器似乎对于这两个元素都足够大了.

知道我错过了什么吗？

-编辑-

目前的IE:

想要(像在Firefox中一样):

我想div { width:33%; border: 3px solid #333;}在一页内放三个.但它只是失败了,就好像总和高于100%.

如何并排浮动3个div并占据宽度:100%没有搞乱？

我在Firefox中有一个奇怪的问题,我似乎无法修复.在Chrome和Safari中我的浮动:左侧和浮动:右侧列正常工作并处于正确的位置,但是当我在Firefox中查看它时,它很混乱.我的底部标题位于其上方,我的列重叠!我一直在寻找,但无法找到任何具体的解决方案来浮动Firefox的差异 - 有人可以看看我的代码并告诉我发生了什么？或者有人有任何关于我不知道的Firefox浮动的事实吗？谢谢!

这是我的JsFiddle和我的代码.对于JsFiddle,Firefox中的浮动似乎没问题..只是不在我的页面上.呃,我会继续寻找,但我很确定它是漂浮物的一个问题.删除它们使得一切都很好地融合在Firefox上.至少左栏.

这是相关的浮点数css:

.fourtextleft {
    font-family: Roboto;
    text-decoration: none;
    text-transform: none;
    font-weight: 300;
    font-size: .5em;
    color: #666;
    float: left;
    width: 38%;
    height: auto;
    text-align: justify;
    margin: 0% 5% 2% 0%;
    padding: 4% 2% 3.5% 0%;
    vertical-align: middle;
}

.fourtextright {
    font-family: Roboto;
    text-decoration: none;
    text-transform: none;
    font-weight: 300;
    font-size: 1em;
    color: #666;
    float: right;
    width: 30%;
    height: auto;
    text-align: justify;
    margin: 3% 15% 2% 0%;
    padding: 4% 0% 3.5% 2%;
    vertical-align: middle;
}

.floaters {
    clear: …

我有一个导航框,尽管浮动设置为正确,但"接触"元素并非完全右对齐.

<div id="navwrapper">
    <ul>
        <li class="single">Home</li>
        <li class="double" id="left">About</li>
        <li class="double" id="right">Contact</li>
        <li class="single">Book</li>
    </ul>
</div>

和CSS

#right {
    float:right;
}

其他问题似乎建议将左右元素交换以获得所需效果,但这不起作用.

的jsfiddle

我想弄清楚如何垂直对齐 2 个浮动 div。每个 div 都有一个灵活的高度。

这是我到目前为止所拥有的：http : //jsfiddle.net/VLRpc/1/

 <div class="section">
    <div class="container">
        <div class="wrap">
            <div class="column left">
                <h1>Software</h1>
                <p>I use many software applications to achieve the best results.</p>
            </div>
            <div class="column right"></div>
        </div><!-- end wrap -->
</div><!-- end container -->
</div><!-- end section -->

.container {
width: 100%;
height: 100%;
display: table;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.wrap {
vertical-align: middle;
display: table-cell;
padding: 0;
margin: 0;
border: 1px solid red;
} …

我subdiv里面有div maindiv。我想将sub div分为多个行和列，如下所示。

如何划分subdiv如下