标签: css-float

我有一个网页有两个 div，一个在左边，一个在右边。我已经使用 float: left/right; 定位了这些位置。

在 FireFox、IE（包括 IE6！！！）和 Chrome 中一切正常。但出于某种原因，在 Safari 中，右手边的 div 出现在左手边的 div 下方。所以，我在 div 周围放置了一个边框，我注意到仅在 Safari 中，右手 div 认为它是另一个 div 的一部分。我检查了页面的 div 和关闭 div，一切看起来都不错。

我也有点困惑为什么它可以在 Chrome 中运行而不是在 Safari 中运行。这两个浏览器都是Webkit浏览器吗？？

所有帮助表示赞赏

我正在使用 HTML 和 CSS，我想将表单和徽标更靠右对齐：

如果我做一个模型，我想要的位置更像是这样：

我的 HTML 是

      <!DOCTYPE hml>
                        <html>
                                <head>  <link rel="stylesheet" href="/welcome/static/css/register.css"/>

                                <STYLE TYPE="text/css">



</STYLE> 


                                        <title>{% trans %}Register new distributor{% endtrans %}</title>
                                </head>
                                <body>     <div id="content">
                                <form action="{{action}}" method="post"><img src="/welcome/static/images/reg-reg.gif">

                                               <table><tr><td>

                                                <label>Pers. number </label></td><td><input type="text" name="soc_sec" placeholder="{% trans %}Your social security number{% endtrans %}" />({% trans %}YYMMDDXX{% endtrans %})</td></tr><tr><td>

 <label for="start">Sponsor ID</label></td><td>
                        <input type="text" id="start" name="Log1" size="3" maxlength="3" />
                        <input type="text" name="Log2" size="3" maxlength="3" />
                        <input type="text" name="Log3" size="3" maxlength="3" />
                <input type="text" name="Log4" size="3" maxlength="3" />(<a …

我知道这已经被问过一百万次了，但我似乎仍然找不到答案（大多数问题似乎与我想要的不一样）。

我有两个 div，分别是 #left 和 #right。#right 的固定尺寸为 150px x 50px。我希望 #left 扩展并填充剩余空间，#right 位于屏幕的最右侧。我尝试过以不同的方式浮动它们并设置 display: inline-block; 但我似乎仍然无法确定它。我读过的所有文章都是关于左边的 div 被固定，右边的 div 正在增长。我尝试反转我读到的内容，但它总是导致#left div 在#right 周围浮动。我的意思是，我的#left div 将缩小到最小（内联块），或者它将显示前 50 像素直到 #right，然后 #left 的其余部分将隐藏在 #right 下，而不是保持齐平。

我希望这是有道理的。这有点难以解释。

我如何并排设置两个 div 和下面的第三个像这样

.

我当前的代码如下，在名称 div 后放置注释 div

HTML：

<div id="info_div">
    <div id="info_div_name">Name</div>
    <div id="info_div_time">6:30 PM</div>
    <div id="info_div_note">Note</div>
</div>

CSS：

#contact_table_data {
    width:inherit;
    height:inherit;
    background-color:#99cc33;
    max-width:400px;
}

#info_div_name {
    width:auto;
    height:auto;
    padding: 5px 0px 5px 10px;
    float:left;
}

#info_div_time {
    width:auto;
    height:auto;
    padding: 5px 10px 5px 0px;
    float:right;
}

#info_div_note {
    width:inherit;
    height:auto;
    position:static;
    padding: 0px 10px 5px 10px;
}

我有一个div具有 property 的容器width: auto;。该容器具有具有 property 的子元素float: left;。正常的行为是连续对齐所有元素，直到一个元素溢出容器div。在这种情况下，该子元素将放置在其他子元素下。我试图强制子元素扩展容器div，即使它溢出。我希望所有子元素都对齐。

我怎样才能做到这一点？

一些网站使用具有相对位置的DIV,然后它们将绝对位置应用于子元素,以便将元素放置在期望的位置(例如,左0或右0).其他人使用浮动,例如浮动:向左或向右浮动.哪一个更好？或者在什么样的情况下他们更好？

由于我使用固定布局,我最好使用相对定位和相对定位？

如何在浮点数中添加填充:正确的项目,而不是让它搞乱一切？填充不应该在内部而不是在外面工作？看看绿色部分的填充会发生什么:http://lauradifazio.altervista.org/cms/

我有几个div包含浮动图像和无序列表.我想要将这两个并排放在页面下方.

问题是,随着div页面的下移,整个事情就会崩溃.右侧的图像开始越来越低,列表项目越来越高.这就是我做的.

    .imageleft  {
    float: left;
    margin-left: 0;
    margin-top: 0;
}

.container-right {
display:inline;
    padding-bottom: 10px;
    width: 500px;

}

.container-left {

    float:left;
    padding-bottom: 10px;
    width: 500px;

}


    <div class="inline">
        <div class="container-left">
            <img alt="Image info" class="imageleft" src="someimage.png" />
            <h3>
                Title</h3>
            <ul>
                Sub title:
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>
        </div>
        <div class="container-right">
            <img alt="Blah blah" class="imageleft" src="/another-image.png" />
            <h3>
                Title</h3>
            <ul>
                Sub heading
                <li> …

我有三个span标签:一个是左侧浮动(A),另外两个是右侧浮动(B和C).

但是,我想要的是让C位于B下方,但两者都要向右浮动; 也就是说,在不同的路线上.我试图在B上使用display:block,但这似乎没有帮助.如何使用span标签(而不是div)来完成？

这是我的css:

#A {
  float:left;
}

#B {
  float:right;
}

#C {
  float:right;
}

非常感谢你.

我有一个包含许多左浮动div的容器,类似于:

<div id="container">
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
</div>

<style>
    .panel {float:left; width:200px;}

</style>

在我的应用程序中,用户可以动态地向容器添加越来越多的面板,我希望它们总是在右边堆叠,并且当用户超出可用空间时,可以显示水平滚动条.

jsfiddle:http://jsfiddle.net/yzTFC/6/