标签: css-float

我有一些关于基本CSS的问题,我无法理解或找到答案.

首先,我尝试在另一个div标签中放置3个div标签.包含3个其他标记的第一主div标签无关为其设置除了大小,这是400px由400px.其他3周的div里面,全部都是20px由20px和1被分配float:left,而另外两个被分配的样式,这是正确的浮动.所有属性都在一个样式中定义,并且两个div float:right被分配了相同的样式.我的问题是,在代码中排在最后的两个div中,首先出现在浏览器中,我不明白这个原因.

这是代码:

<html>
<head>
<style>
#main{ 
    border: red 4px dashed;
    width: 25%
    height: 25%,
    }
#left{ 
    float: left;    
    width: 20px;
    height: 20px,
    }
#right{ 
    float: right;   
    width: 20px;
    height: 20px,
    }
</style>
</head>
<body>
<div id="main">
<div id="left">1</div>
<div id="right">2</div>
<div id="right">3</div>
</div>
</body>
</head>
</html>

我正在试图确定div的高度.这听起来很简单,但由于它只有后代内容被浮动这一事实而变得复杂,所以要求高度/ outerHeight(使用jQuery)/ clientHeight/offsetHeight只返回0,即使它清楚地显示在页面上,它确实呈现高度.以下是HTML结构的示例:

<div id="root">
   <div class="header"></div>
   <div class="body">
      <div class="text-left" id="text-one">
         <p>Some text taking up multiple lines</p>
      </div>
      <div class="text-right" id="text-two">
         <p>Other text</p>
      </div>
   </div>
</div>

"text-left"和"text-right"元素有"float:left;" 并且"浮动:正确;" 在他们身上,所以当我要求"root"的高度时,它告诉我它是0.但是,当然,当我得到"text-one"和"text-two"的高度时,它正确告诉我它是20或其他什么.

如何确定"根"元素的REAL高度？(例如,如果"text-one"的高度为50而"text-two"的高度为20,则会知道真正的高度为50)

我想有一些逻辑来计算所有后代元素的高度,并计算它们是否漂浮等等,并给我一个最终数字......但我不够聪明,不能解决这个问题.

提前致谢.

编辑:请注意更改HTML(例如包括"清除")不是一个选项.我需要能够告诉这个div的高度.

在表少设计中使用浮动是否好？在表格较少的跨浏览器兼容设计的上下文中,float的优缺点是什么？跨浏览器兼容的无表格设计是否有最佳实践指南？

我试图在外部div中嵌套三个div.问题是嵌套的div不会使外部的增长.

CSS如下:

.page {display: block;  width: 96%;}
.page .left-content {display: inline-block; float:left; width: 15%;}
.page .middle-content {display: inline-block; float:left; width: 70%;}
.page .right-content {display: inline-block; float:left; width: 15%;}

我想要的HTML:

<div class="page">
    <div class="left-content">...content...</div>
    <div class="middle-content">...content...</div> 
    <div class="right-content">...content...</div>
</div>

为页面类提供背景颜色表明页面类div的大小不正确.我该如何解决这个问题？

我有这个HTML:

<div id="content">
    <h1 id="prompt">What's on your mind?</h1>

    <form action="post.php" method="POST" id="message-form">
        <textarea placeholder="Type in anything you want to share. Anything at all."></textarea>
        <p>Feel free to type up to <span id="character-count">2000 characters</span>, or to use <a href="http://daringfireball.net/projects/markdown/syntax">Markdown</a> formatting.</p>
        <input type="submit" class="submit button" value="Share" />
        <br class="clearfix" />
    </form>
</div>

这个CSS:

/* CSS Reset
-------------------------------------------*/
* {
    margin: 0;
    padding: 0;
}

.clearfix {
    clear: both;
}

/* UI Elements
-------------------------------------------*/
.button {
    background-color: #ccc;
    background-image: -webkit-linear-gradient(white, #ccc);
    background-image: -moz-linear-gradient(white, #ccc); …

我想扩展右浮动div旁边的DIV的宽度.

如果剩下的其他div浮动,我没有问题:http:
//jsfiddle.net/ykyVv/

但是如果另一个div浮动到右边我不知道怎么做:
http://jsfiddle.net/FMyjU/

(注意div不是彼此相邻的,我也尝试添加float:left到第一个div然后它不再扩展了)

我<li>在左侧对齐元素时遇到问题.

在下面给出的图像中,您可以看到每个子弹的左侧都有空间.我想删除空间,使双方Imported及100% Genuine子弹是直接低于绿色对勾.

这是我正在使用的代码.

<table border="1">
    <tr>
        <td><ul style="margin:0;"><li>Imported</li></ul></td>
        <td><ul style="margin:0;"><li>Authentic & Licensed</li></ul></td>
    </tr>
    <tr>
        <td><ul style="margin:0;"><li>100% Genuine</li></ul></td>
        <td><ul style="margin:0;"><li>200 GSM Paper Depth</li></ul></td>
    </tr>
</table>

这是我的jsFiddle

我只有3 div秒.第二个div浮在右边,第三个div在第二个下方.

在第3个div,我设置margin-top属性,此属性对布局没有任何影响.

问题:有人能解释我理解浮动的这种行为吗？

HTML

<div class="header">
</div>
<div class="sidebar">
</div>
<div class="footer">
</div>

CSS

.header {
    width: 100%;
    height: 80px;
    background-color: #abcdef;
}

.sidebar {
    margin-top: 15px;
    float: right;
    width: 200px;
    height: 200px;
    background-color: #abcdef;
    display: block;
}

.footer {
    clear: both;
    margin-top: 20px;
    width: 100%;
    height: 60px;
    background-color: #000000;
}

http://jsfiddle.net/1351qL91/

<div style="width:200px"> 
<span style="float:left">left</span>
<span style="float:right">right</span>
<br/>
<div style="position:relative">
    <span style="float:left">left</span>
    <span style="float:right">right</span>
<div>
<br/>
<div style="position:fixed"> 
    <span style="float:left">left</span>
    <span style="float:right">right</span>
</div>

右侧浮动的跨度不会在位置固定的div内浮动.

我得出的结论是,如果容器的宽度未知,浮动将不起作用,在这种情况下,宽度确实是未知的.

所以可以解决这个问题的另一个问题是如何将固定位置的子设置为其父级的100%宽度？

PS我正在使用bootstrap 3,这意味着容器div(我设置为200px)实际上是类col-md-3 - >我不知道容器的宽度,这就是为什么我需要它是动态的

考虑以下HTML / CSS：

* {
    box-sizing: border-box;
}

.field {
  overflow: auto;
}
  
.field label {
  float: left;
  width: 80px;
}

.field input {
  display: block;
  width: 100%;
}

<div class="field">
  <label>Test</label>
  <input type="text">
</div>

在Firefox和Chromium上，结果最终都如下所示：

相反，我希望与<input>出现在同一行<label>。换句话说，是这样的：

为什么不float: left;使标签显示在输入的左侧？