`
zhou304082042
  • 浏览: 32790 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

解决如何让两个div在一行上的问题

阅读更多
方法一,如果两个div都不知道width的话, 前一个float:left, 后一个不管最后用一个clear的div就搞定了,但是两个div的位置会重合 ,内容不会重合
<div style=”position:absolute;left:200px;height:1000px;width:300px;display:inline;”>
<div style=”float:left;position:relative;width:100px;background:#990022; “>
afafdadfas, ssssssssssss
</div>
<div style=”white-space:normal;background:#9ff022;”>
afsafasasd fsaf dfs fdas asfdsa ad afdfasdffffaaaaaaaaaaaaaaaaaaaaaaaaadasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
<!–
<div style=”font-size:0px; line-height:0px; clear:both;”>
</div>
–>
</div>

方法二,如果右边的div知道width的话, 两个都用float:left就行了,内容和位置都不会重合,而且两个div再同一行上
<div style=”position:absolute;left:200px;top:300px;height:1000px;width:300px;display:inline;”>
<div style=”float:left;position:relative;width:100px;background:#990022; “>
afafdadfas, ssssssssssss
</div>
<div style=”white-space:normal;float:left;background:#9ff022;width:100px;”>
afsafasasd fsaf dfs fdas asfdsa ad afdfasdffffaaaaaaaaaaaaaaaaaaaaaaaaadasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
<div style=”font-size:0px; line-height:0px; clear:both;”>
</div>
</div>

方法三,设置右边的div的top为负值, left大于等于左边div的宽度 ,必须知道左边div的width,不太推荐。
分享到:
评论

相关推荐

    两个DIV同一行显示

    `被用来让两个`&lt;div&gt;`元素并排显示在一行内。 ```html &lt;div style="width:100px;"&gt; &lt;div style="float:left;background-color:#CCCC00;width:50%;"&gt;wfwfwfwf&lt;/div&gt; &lt;div style="float:left;background-color:#00...

    两个div如何并排一行具体该怎么实现

    在这个问题中,通过设置CSS样式,我们可以让两个`div`元素在同一行内排列。以下将详细解释实现这个效果的关键步骤和涉及的CSS属性。 首先,我们有两个主要的CSS属性用于此目的:`float`和`display`。 1. `float`...

    纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存

    在这个特定的主题中,“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果:当鼠标悬停在一个div上时,另一个关联的div会显示出来,同时其他无关的div保持隐藏状态。这种效果在创建导航...

    让多个div在同一行显示的样式及html代码

    通过为不同的div指定相同的宽度值,可以确保它们具有相同的尺寸,并且整齐地排列在同一行上。 **行高与字体** 另外,`.custom_div`还通过`height`和`line-height`属性设置了元素的行高。在这里,行高和高度均为23...

    2个div并列

    `div`是HTML中的一个块级元素,它默认会在页面上占据一整行,下面的内容会另起一行显示。如果想要两个`div`并列,我们需要打破这个默认行为。 在描述中提到的博客链接(https://baiiiuuu.iteye.com/blog/1130265)...

    通过浮动+定位实现两个div在同一行

    为了使两个div在一行显示,并且在布局上保持良好的结构和灵活性,可以将float和position属性结合使用。例如,可以在第一个div元素上使用float:left使其向左浮动,同时保持相对定位position:relative。这样做既能让...

    div多列等高处理,实现多个div等高

    假设我们有三个并排的div,可以通过计算最高度div的高度,并将其他两个div的padding-bottom设为相同的负值,使其看起来等高。然而,这种方法需要精确计算,且对动态内容的适应性较差。 3. **Flexbox布局**:随着CSS...

    DIV折叠展开DIV折叠展开

    在这段代码中,首先定义了两个JavaScript函数`panall()`和`pan(divid)`。接着,在HTML部分,通过使用`&lt;div&gt;`标签创建了一个点击后可以展开/收起所有DIV的按钮,并通过设置`onclick`属性调用`panall()`函数。同时,还...

    两个div在同一行且不换行的两种方法

    在网页布局设计中,将两个`div`元素放置在同一行并避免它们自动换行是一项常见的需求。这通常涉及到CSS(层叠样式表)中的布局技术。以下是对标题和描述中所述知识点的详细解释: ### 方法一:使用浮动(Float) *...

    两个div+css整站的例子

    这样,两个Div就会并排显示,直到其中一栏的内容填满其容器,然后另一栏才会在其下方继续排列。 2. **定位布局**:除了浮动,还可以使用绝对定位(absolute positioning)或相对定位(relative positioning)来控制...

    div层显示一行文字实现翻页的效果

    "div层显示一行文字实现翻页的效果"这个主题就是关于如何利用HTML、CSS和JavaScript来创建一个简单的翻页效果,通常用于展示内容分页或者模拟书籍翻页。在这个教程中,我们将探讨如何通过div元素和相应的编程技巧来...

    DIV 文字可以换行但是纯数字和字母不可以换行解决方案

    这里使用了`word-wrap`和`word-break`两个CSS属性来解决问题: 1. **`word-wrap: break-word;`**:此属性允许长单词或URL地址在到达边界时自动换行,而不是将它们挤出容器边界。 2. **`word-break: break-all;`**:...

    点击一行弹出一个div层,把该条的信息都显示在层中

    ### 点击一行弹出一个div层,把该条的信息都显示在层中 #### 背景介绍 在Web开发中,特别是使用ASP.NET进行开发时,经常需要对表格中的数据进行操作,如查看、编辑等。`GridView` 控件是ASP.NET中非常常用的一个...

    DIV+CSS相对IE6、IE7和IE8的兼容问题

    有时候我们希望将`inline`元素表现为`block`效果,或让`block`元素在一行内排列,这时可以使用`display`属性进行切换,如`display:block`或`display:inline`。 关于`width`和`height`,IE不支持`min-width`和`min-...

    HTML表格转换网页div_css完美转换软件工具

    这款"HTML表格转换网页div_css完美转换软件工具"正是为了解决这个问题,帮助开发者将基于表格的布局转换为更加现代的CSS布局。 HTML表格()虽然方便快捷,但在复杂的网页设计中,可能导致页面加载速度慢,不易控制...

    网页设计中的常见问题及其解决方法(div+css)

    三、一个兼容性调整(IE 和 Mozilla)的笨办法:初学可能会碰到这样一个情况:同样一个标签的属性在 IE 设置成 A 显示是正常的,而在 Mozilla 里必须要设成 B 才能正常显示,或者两个倒过来。 知识点:浏览器差异、...

    jQuery在div中去input的值

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。本文将详细讲解如何使用jQuery在div中获取和操作input元素的值。 首先,理解基本的HTML结构是至关重要的...

    一个挺常用的float布局div问题解决方法

    这次遇到个类似的控件,一个父div带边框,里面就是一个一个float的子div,需要换行的时候加...然后发现在ie6里面父div的边框没了, ie7里面,第一个换行符前面的div跑到父div的外面去了,认了老子做弟弟怎么行啊~ 经过测试啊

Global site tag (gtag.js) - Google Analytics