转自：http://zzc1684.iteye.com/blog/1520217
（用div控制元素排版有时候还是弄不明白，不过用表格的方式还是比较方便解决的，div排版留着有时间在研究，下面的方式也能解决问题的，可参考下）
一般我们在做网页的时候如果放两个DIV，那在显示的时候这两个DIV是在列的方面上显示的，也就是第二个DIV显示在第一个的下面，如果我们想要让这两个DIV在行的方向上显示，可以用下面的css来实现
<html>
<head>
<style type="text/css">
.left1{
float:left; /**//* 这个是关键的地方 让col1往左浮动，这样它的后面（右边）就可以放置别的元素（别的元素：可以是div，图片，文字等） */
width:300px;height:300px;
background:#eee;
border:1px solid #ccc;
}
.left2
{
float:left;/**//* 这个是关键的地方 让col2也往左浮动，紧跟在col1的后面 */
margin-left:5px;/**//* 让col2和col1之间有些间隔 */
width:490px;height:300px;/**//* 给一个尺寸 可以随意*/
background:#ddd;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div class="left1">
You did a good job!
</div>
<div class="left2" >
You did a good job!
</div>
</body>
</html>
相关推荐
根据给定的文件信息，我们可以深入探讨这一主题，了解如何通过CSS属性实现`<div>`元素的一行显示，并探讨其背后的原理。 ### 核心知识点：CSS布局技术 #### 1. **浮动（Float）** 浮动是CSS中最基础的布局方式之一...
首先，文档中提到的CSS样式具有一定的迷惑性，因为它包含了一些不利于div在同一行显示的属性，例如`margin-bottom`和`clear:both;`。这两个属性通常用于控制元素的间距和清除浮动，它们在这里的出现可能是为了展示其...
在网页设计中，将两个Div并排显示是一种常见的布局需求。实现这一布局有多种方法，每种方法都基于CSS的不同特性。下面将详细介绍各种实现方式及相关知识点。 一、使用display的inline属性 这种方法是通过将两个Div...
在这个特定的主题中，“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果：当鼠标悬停在一个div上时，另一个关联的div会显示出来，同时其他无关的div保持隐藏状态。这种效果在创建导航...
"div层显示一行文字实现翻页的效果"这个主题就是关于如何利用HTML、CSS和JavaScript来创建一个简单的翻页效果，通常用于展示内容分页或者模拟书籍翻页。在这个教程中，我们将探讨如何通过div元素和相应的编程技巧来...
在JavaScript（JS）中，"鼠标浮动显示div"是一种常见的交互设计，通常用于创建提示框、下拉菜单或工具提示。这种技术的核心是利用事件监听器来捕捉鼠标的移动，并根据鼠标的移动来控制div元素的显示与隐藏。在本案例...
下面将详细介绍如何通过CSS的浮动属性和定位属性的组合使用，来实现两个div在同一行显示的效果。 首先，浮动是CSS布局中一个非常重要的属性。通过设置元素的浮动属性，可以使得元素脱离正常的文档流，向左或向右...
4. **inline-block**：内联块元素，和其他内联元素在同一行显示，同时具有块级元素的特点。 示例代码： ```html <div id="myDiv" style="display:none;"> 这个div不显示，并且不保留空间。 </div> ``` 通过...
在网页设计中，让`<div>`元素内的多行文本实现上下居中并添加省略号功能是一项常见的需求。这通常涉及到CSS布局、文本对齐和溢出隐藏等多个技术点。接下来，我们将深入探讨如何实现这个效果。 首先，我们要解决的是...
在用户双击某一行后，可以弹出一个包含该行详细信息的`div`层。这个`div`可以通过JavaScript动态创建并填充数据，也可以事先准备好并通过CSS隐藏，待需要时显示出来。 ##### 更新`GridView` 当用户在弹出的`div`中...
使用CSS浮动布局实现5个DIV并排在一行 在 HTML 和 CSS 中，实现多个 DIV 并排在一行是一种常见的布局需求。在本资源中，我们将学习如何使用 CSS 浮动布局实现 5 个 DIV 并排在一行。 在 HTML 部分，我们首先需要...
在网页布局设计中，使两个`div`元素并排显示是一项常见的需求。...以上就是如何在HTML和CSS中实现两个`div`并排一行的具体实现方法。通过理解这些基础知识，你可以灵活地调整布局，满足各种网页设计需求。
Flexbox允许在一行或一列中动态调整元素的大小和位置，而Grid则可以创建二维的网格系统，对于创建对联布局也非常适用。 ```css .container { display: flex; } .left, .right { flex: 1; padding: 10px; } ``` ...
同时，还创建了一个包含内容的`<div>`元素，通过设置`onclick`属性调用`pan('a')`函数来控制该元素的显示或隐藏。 ### 总结 通过以上内容的介绍，我们了解了如何利用HTML和JavaScript来实现简单的折叠面板效果。...
在三行两列布局中，HTML代码会创建一系列的`<div>`元素，这些元素作为容器，承载着不同的内容区块。例如： ```html <div class="row"> <div class="column left"></div> <div class="column right"></div> </div>...
若想让多个input同行显示，则可以将这些input放置在同一个大的div中，然后给这个大的div设置layui-input-item类，并为每个input的div设置layui-inline类。 3. 在有些布局场景下，我们可能希望一组控件显示在同一...
方法一： ...上面的div1和div2就会在同一行显示。。。（此方法一般都会有效的） 方法二： 复制代码代码如下: <div id=”div1″ xss=removed>div1 content</div> <div id=”div2″ xss=removed>d
在网页设计中，让多个div元素在同一行内保持等高是一项常见的需求，这可以使得页面布局更加美观且统一。在本篇文章中，我们将深入探讨如何使用div实现多列等高处理，以及相关的关键技术和方法。 首先，让我们了解...
在网页设计中，"DIV CSS 图片自动换行"是一个常见的布局技巧，它涉及到CSS（层叠样式表）中的盒模型、布局模式以及响应式设计。这个技术主要用于展示一组图片，使得图片能够在页面中自动适应并换行排列，同时还可以...