标签: css-float

我整天都在研究这个问题,但没有提出解决方案.我在容器中的一行中有3列.

1:正确的内容 - 拉右

2:导航 - 拉左

3:主要内容

在大屏幕上看起来如何:

------------------------------------------------
|   Menu  |      Content      |  Right Content |
------------------------------------------------

它在小屏幕上应该是什么样子:

----------------------------
|  Menu  |  Right Content  |
|        |------------------
|        |  Content        |
----------------------------

它现在看起来像什么:

------------------
| Right Content  |
------------------
| Menu | Content |
------------------

我认为这只是一个简单的浮动问题.但我尝试了几乎所有的可能性.

如何水平居中可变宽度的浮动元素？

编辑:我已经使用了包含div浮动元素并width为容器指定了一个(然后margin: 0 auto;用于容器).我只想知道是否可以在不使用包含元素的情况下完成,或者至少不必width为包含元素指定a .

我需要创建一个包含可变数量(浮动？)div的单行:容器尺寸是固定的,并且应该在需要时添加水平滚动条,从不包装.

我试过以下,但它不起作用:它换了.

div#sub {
    background-image:url("../gfx/CorniceSotto.png");
    width:760px;
    height:190px;
}
div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
}
div#sub > div#ranking > div.player {
    float:left;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

我尝试了一些东西(内联,表格等),但它们都失败了.

可以这样做吗？如果是这样,怎么样？

我需要将html内容集中在div class ="partners"(带有2个图像的顶部div)中.正如您从下图所示(它漂浮在左侧而不是div的中心):

这是我的HTML代码:

<div id="partners">
    <div class="wrap clearfix">
        <h2>Partnertnerzy serwisu:</h2>
        <ul>
            <li><a href="http://www.dilbert.com/"><img width="56" height="16" alt="Parnter bar wika" src="/as/partners/wika.png"></a></li>    
            <li><a href="http://www.youtube.com><img width="65" height="15" alt="Parnter bar siemens" src="/as/partners/siemens.png"></a></li>    
        </ul>
        <a class="linkClose" href="/firmy?clbp=1">Zamknij </a>
    </div>
</div>

图片:

CSS:

#partners, #top {
    position: relative;
    z-index: 100;
}
#partners {
    margin: 12px 0 3px;
    text-align: center;
}
.clearfix:after, .row:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
#partners .wrap {
    width: 655px;
}
.wrap {
    margin: 0 auto;
    position: …

我有以下小提琴:

http://jsfiddle.net/q05n5v4c/2/

在Chrome中,它渲染得很好.人字形在右侧.

但是,在Firefox中,它将雪佛龙下降了1行.

我搜索过谷歌并发现了几个关于这个bug的帖子,但没有一个建议有所帮助.

那里的任何CSS专家可以告诉我我做错了什么？

HTML:

<div class="btn-group">
    <button data-toggle="dropdown" 
            class="btn btn-default dropdown-toggle" 
            style="width: 400px;text-align: left;">

        Checked option 

        <span class="glyphicon glyphicon-chevron-down" 
              style='float: right;'></span>
    </button>
</div>

我想要一个左边有固定宽度图像的div和一个带有背景颜色的可变宽度div,它应该在我的设备上扩展它的宽度100%.我无法阻止第二个div溢出我的固定div.

当我添加溢出:隐藏在可变宽度div时,它只是跳到下一行的照片下面.

我怎样才能以正确的方式解决这个问题(即没有黑客或留下边距,因为我需要稍后通过媒体查询使网站响应,我必须为每个设备更改其他分辨率图像的图像)？

• 初学者网页设计师试图解决响应式网站的恐怖 -

HTML:

<div class="header"></div>
<div class="header-right"></div>

CSS:

.header{
    float:left;
    background-image: url('img/header.png');
    background-repeat: no-repeat;
    width: 240px;
    height: 100px;
    }

.header-right{
    float:left; 
    overflow:hidden; 
    background-color:#000;
    width: 100%;
    height: 100px;
    }

有没有一种方法可以在div不使用前一个float: left元素之前插入换行符？

也许有些标签div会把它放在右边？

因为例子规则:http://jsfiddle.net/rudiedirkx/wgue7/

如何将条形图移到底部而不是顶部？现在他们正在坚持容器的顶部(#bars)但我希望它们坚持到底部.

如你所见,我不知道最高杆的高度,所以我不知道容器的高度.

这些q + a没有帮助:垂直对齐浮动div,垂直对齐浮动DIV

应该简单吧？如果它有帮助:它只需要在体面的浏览器中工作.

PS.条形数量是可变的(不在示例中),它们的高度是.只有它们的宽度是静态的.定位absolute无济于事,因为容器div没有测量值.

我在为图像浮动div时遇到了麻烦.这是我想要完成的:

    .container {
       border: 1px solid #DDDDDD;
       width: 200px;
       height: 200px;
    }
    .tag {
       float: left;
       position: relative;
       left: 0px;
       top: 0px;
       z-index: 1000;
       background-color: #92AD40;
       padding: 5px;
       color: #FFFFFF;
       font-weight: bold;
    }

    <div class="container">
       <div class="tag">Featured</div>
       <img src="http://www.placehold.it/200x200">
    </div>

在这张图片中:

我希望"精选"框浮动在图像的顶部,但它似乎"清除"浮动并导致图像换行到下一行,就像它显示为块元素一样.不幸的是,我无法弄清楚我做错了什么.有任何想法吗？

我有一个(水平)居中的外部div包含两个未知宽度的元素:

<div style='width:800px; margin:0 auto'>
  <div style='float:left'>...</div>
  <div style='float:right'>...</div>
</div>

默认情况下,两个浮动都是顶部对齐的,并且具有不同/未知和不同的高度.有没有办法让它们垂直居中？

我最终做了外部div

display: table

和内在的div

display: table-cell;
vertical-align: middle;
text-align: left/right;

但我很好奇是否有办法用花车来做这件事.