今天写css，设置了两个div在同一层级，结构如下
<div style="float: left;">
</div>
<div style="float: left;">
.........
</div>
<div class="clear:both;"></div>
到ie上面测试发现一切正常，可是放在google浏览器上确怎么也不存在于同一行
最后，怀疑是不是没有设置第二个div的宽度，导致不能满足分配在一行的宽度？加上宽度，测试，成功
java新手上路
- 浏览: 82441 次
- 性别:
- 来自: 南京
-
最新评论
两个div设置了float:left不并排的原因
相关推荐
在这个例子中，两个`<div>`元素都被赋予了`float:left;`属性，这意味着它们将尽可能地向左靠拢，如果容器宽度足够，它们就会在同一行显示。同时，通过设置`width:50%;`，每个`<div>`元素将占据容器一半的宽度，确保...
在上述示例中，`div id="b"`和`div id="c"`都设置了`float:left`，但当在IE7下运行时，`div id="c"`并未像预期那样与`div id="b"`并排显示，而是出现在`div id="b"`下方，且位置稍有偏移。这种现象是由于IE7对CSS盒...
在这个例子中，两个`div`分别设置了`float:left`，使得它们都向左浮动，从而能并排显示。 ```css .onediv, .twodiv { float: left; } ``` 2. **宽度（Width）与边距（Margin）**： 为了让`div`元素不重叠，...
总结来说，`float`属性是实现两个`div`不换行的常见方法，通过设置元素的浮动方向，可以让它们并排放置。尽管有新的布局技术出现，`float`仍然是一个实用的工具，特别是在维护老项目或兼容旧浏览器时。理解并熟练...
例如，将两个 `div` 使用 `float:left` 和 `float:right` 分别设置，可以实现并排显示的效果。 在手机适配方面，随着移动互联网的发展，响应式设计（Responsive Design）变得至关重要。通过 CSS3 的媒体查询（Media...
上述代码中，两个div元素会显示在同一行内，但是这种并排效果并不是严格意义上的并排布局，因为它不提供行内元素之间的空间控制，通常还需要额外的样式处理。 二、通过设置float来让Div并排显示 浮动（float）是一...
在网页设计中，将两个`div`元素并列显示是一项常见的布局任务，这通常涉及到CSS（Cascading Style Sheets）的布局技术。标题"2个div并列"指的是如何使用CSS来实现两个`div`元素水平相邻显示。下面将详细解释这一过程...
1. **未设置浮动**：当两个`div`元素（例如`content_a`和`content_b`）没有设置浮动时，它们会按照正常文档流，每个元素占据一行显示。 2. **设置左侧浮动**：如果`content_a`设置为`float:left`，那么它会向左浮动...
在网页布局设计中，将两个`div`元素放置在同一行并避免它们自动换行是一项常见的需求。这通常涉及到CSS（层叠样式表）中的布局技术。以下是对标题和描述中所述知识点的详细解释： ### 方法一：使用浮动（Float） *...
1. **HTML结构**：首先，创建两个并排的`div`元素，通常使用`float: left`和`float: right`使它们并列显示。例如： ```html <div id="leftDiv"></div> <div id="rightDiv"></div> ``` 2. **CSS样式**：通过CSS...
在上面的代码中，.box1类设置了宽度为70%，.box2类设置了宽度为30%，它们加起来正好是100%，这确保了这两个div可以并排填充整个父容器的宽度。 3. display属性：在本例中，display被设置为inline，这是为了防止内部...
当一个`div`元素设置为`float:left`时，它会被移动到其父容器的左边界，并允许其他元素围绕它流动。同样，`float:right`则会将`div`元素移动到右边界。`none`则是默认值，意味着元素不会浮动，按照正常的文档流排列...
然而，使用`float`时常常会遇到一个常见的问题，即浮动元素（float div）无法撑起其父元素的高度，导致父元素高度塌陷。这个问题在前端开发中很常见，尤其是在早期的网页布局设计中。本篇将详细探讨这个问题，并提供...
一种5个DIV并排在一行的方法</title> <style type=”text/css”> #bottom { margin:0 auto;/*下边居是0 */ width:300px; } #bottom div { width:60px; } #d1 { float:left; background:#f00; } #d2...
在这个例子中，两个`<div>`都设置了`float:left`，这意味着它们会向左浮动，并且宽度设置为50%，使得它们能够并列在同一行内。表格的宽度设置为100%，确保它们完全填充各自的`<div>`容器。 除了使用内联样式，我们...
- 浮动元素：为了让这两个`<div>`并排显示，可以使用`float`属性。将左侧`<div>`设置为`float:left;`，右侧`<div>`设置为`float:right;`。 - 清除浮动：为了避免父元素高度塌陷，可以在父元素或之后的元素上应用`...
例如，我们可以设置`float:left`使每个元素左对齐并排显示： ```actionscript var textAndImageHTML:String = "<div style='float:left'>" + 文本内容 + "</div>" + "<div style='float:left'><img src='embed:...
这样，两个Div就会并排显示，直到其中一栏的内容填满其容器，然后另一栏才会在其下方继续排列。 2. **定位布局**：除了浮动，还可以使用绝对定位（absolute positioning）或相对定位（relative positioning）来控制...