`
zzc1684
  • 浏览: 1220963 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

div在同一行中显示

    博客分类：
  • Html
div在同一行中显示divcss 
阅读更多

 一般我们在做网页的时候如果放两个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>

 

分享到：
| 用jQuery在IFRAME里取得父窗口的某个元素的 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    两个DIV同一行显示

    根据给定的文件信息，我们可以深入探讨这一主题，了解如何通过CSS属性实现`&lt;div&gt;`元素的一行显示，并探讨其背后的原理。 ### 核心知识点：CSS布局技术 #### 1. **浮动（Float）** 浮动是CSS中最基础的布局方式之一...

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

    首先，文档中提到的CSS样式具有一定的迷惑性，因为它包含了一些不利于div在同一行显示的属性，例如`margin-bottom`和`clear:both;`。这两个属性通常用于控制元素的间距和清除浮动，它们在这里的出现可能是为了展示其...

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

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

    js鼠标浮动显示div

    在JavaScript（JS）中，"鼠标浮动显示div"是一种常见的交互设计，通常用于创建提示框、下拉菜单或工具提示。这种技术的核心是利用事件监听器来捕捉鼠标的移动，并根据鼠标的移动来控制div元素的显示与隐藏。在本案例...

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

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

    网页设计div的显示和隐藏

    4. **inline-block**：内联块元素，和其他内联元素在同一行显示，同时具有块级元素的特点。 示例代码： ```html &lt;div id="myDiv" style="display:none;"&gt; 这个div不显示，并且不保留空间。 &lt;/div&gt; ``` 通过...

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

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

    DIV 上下居中 多行 省略号

    在网页设计中，让`&lt;div&gt;`元素内的多行文本实现上下居中并添加省略号功能是一项常见的需求。这通常涉及到CSS布局、文本对齐和溢出隐藏等多个技术点。接下来，我们将深入探讨如何实现这个效果。 首先，我们要解决的是...

    jQuery在div中去input的值

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

    全屏css+DIV页面上中下三行布局,兼容各浏览器中间居中显示

    本文将深入探讨如何使用CSS+DIV来创建一个全屏页面上中下三行布局，并确保在各种浏览器中都能实现中间内容的居中显示。 首先，我们需要理解CSS的盒模型和定位概念。盒模型包括内容区域（content）、内边距（padding...

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

    在网页布局设计中，使两个`div`元素并排显示是一项常见的需求。...以上就是如何在HTML和CSS中实现两个`div`并排一行的具体实现方法。通过理解这些基础知识，你可以灵活地调整布局，满足各种网页设计需求。

    div css显示对联带关闭代码.rar

    Flexbox允许在一行或一列中动态调整元素的大小和位置，而Grid则可以创建二维的网格系统，对于创建对联布局也非常适用。 ```css .container { display: flex; } .left, .right { flex: 1; padding: 10px; } ``` ...

    让两个Div并排显示的多种方法

    在网页设计中，将两个Div并排显示是一种常见的布局需求。实现这一布局有多种方法，每种方法都基于CSS的不同特性。下面将详细介绍各种实现方式及相关知识点。 一、使用display的inline属性 这种方法是通过将两个Div...

    DIV折叠展开DIV折叠展开

    在网页开发中，经常需要实现某些内容区域的显示与隐藏功能，即所谓的“折叠”与“展开”。这可以通过改变元素的`display`属性来实现。在本例中，通过HTML与JavaScript的结合，可以创建一个简单的折叠面板效果。 ###...

    DIV＋CSS＋HTML布局（三行两列布局）

    在三行两列布局中，HTML代码会创建一系列的`&lt;div&gt;`元素，这些元素作为容器，承载着不同的内容区块。例如： ```html &lt;div class="row"&gt; &lt;div class="column left"&gt;&lt;/div&gt; &lt;div class="column right"&gt;&lt;/div&gt; &lt;/div&gt;...

    html页面中js一行一行读取txt文件并排序显示_仅IE浏览器执行.zip

    4. 存储和排序数据：每读取一行，就将其存储在一个数组或对象中。为了排序，可以使用JavaScript内置的`sort()`函数，根据需要定制比较函数以实现自定义排序规则。 5. 显示内容：将排序后的数据逐行插入到HTML元素，...

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

    在网页设计中，让多个div元素在同一行内保持等高是一项常见的需求，这可以使得页面布局更加美观且统一。在本篇文章中，我们将深入探讨如何使用div实现多列等高处理，以及相关的关键技术和方法。 首先，让我们了解...

    DIV CSS 图片自动换行

    在网页设计中，"DIV CSS 图片自动换行"是一个常见的布局技巧，它涉及到CSS（层叠样式表）中的盒模型、布局模式以及响应式设计。这个技术主要用于展示一组图片，使得图片能够在页面中自动适应并换行排列，同时还可以...

    5个DIV并排在一行的一种方法

    在本资源中，我们将学习如何使用 CSS 浮动布局实现 5 个 DIV 并排在一行。 在 HTML 部分，我们首先需要创建一个容器元素，例如 `&lt;div id="bottom"&gt;`，然后在其中包含 5 个子元素 `&lt;div&gt;`，每个子元素都将被设置为...

Magicbox
Global site tag (gtag.js) - Google Analytics