`
yanzilee9292
  • 浏览: 538503 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

设置DIV并排显示

 
阅读更多

需要注意的是,所有子元素都需要设置CSS,容器可以不设置:

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
 
分享到:
评论

相关推荐

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

    二、通过设置float来让Div并排显示 浮动(float)是一种非常实用的布局方式,它可以让元素脱离正常的文档流,向左或向右移动,直到它的外边缘碰到包含框或另一个浮动元素为止。 ```css #left,#right{float:left;...

    两个div并排的实现代码

    总结来说,通过设置`div`元素的`float`属性、宽度和边距,我们可以实现两个`div`并排显示。如果需要进一步控制布局,如居中对齐,可以添加外部容器并调整其样式。对于初学者来说,理解并掌握这些基本的CSS布局技巧...

    两个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...

    Dreamweaver中div标签怎么设置左右并排?

    在本例中,第一个div标签创建完成后,会命名为“1”,第二个创建并设置好浮动属性后会命名为“2”,这样两个div就可以按照预定的样式左右并排显示。如果要继续添加更多并排的div元素,同样需要将新元素设置为向左...

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

    例如,可以将左右对联的div分别设置为左浮动和右浮动,并通过调整宽度和内边距来确保它们并排显示。 ```css .left { float: left; width: 48%; padding: 10px; } .right { float: right; width: 48%; ...

    div 2列和3列显示

    标题中的“div 2列和3列显示”指的是在网页设计中使用HTML和CSS来创建两列或三列布局的方法。这种布局模式是网站设计的基础,常见于博客、新闻页面和电商网站,用于展示不同内容区域。下面我们将深入探讨这个话题。 ...

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

    使用CSS浮动布局实现5个DIV并排在一行 在 HTML 和 CSS 中,实现多个 DIV 并排在一行是一种常见的布局需求。在本资源中,我们将学习如何使用 CSS 浮动布局实现 5 个 DIV 并排在一行。 在 HTML 部分,我们首先需要...

    HTML—div例子

    例如,我们可以创建一个包含两个并排显示的`&lt;div&gt;`: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;HTML div 示例 &lt;div class="column"&gt;左侧内容&lt;/div&gt; &lt;div class="column"&gt;右侧内容&lt;/div&gt; ``` 在ki2.css中,我们...

    行元素并排

    一、使用css float并排显示 二、使用css display同行显示 我们加入display:inline即可解决实现同行并排显示div盒子对象。对同行所有div标签设置div{ display:inline}样式

    div+css让div内部元素如单选按钮均匀分布

    `属性,使其向左浮动并排显示,这样可以将两个div并排地排列在一起。 在两个内部div中,都设置了宽度为49%以及text-align:center;来让其中的单选按钮和文字居中对齐。设置宽度为49%是为了让这两个div的宽度略小于...

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

    在网页布局设计中,使两个`div`元素并排显示是一项常见的需求。在这个问题中,通过设置CSS样式,我们可以让两个`div`元素在同一行内排列。以下将详细解释实现这个效果的关键步骤和涉及的CSS属性。 首先,我们有两个...

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

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

    DIV+CSS+HTML布局(三行两列布局)

    通过设置盒模型属性(如宽度、边距、填充等),我们可以控制每个`&lt;div&gt;`的大小和位置。对于三行两列布局,我们通常会使用浮动(`float`)或Flexbox(弹性盒子模型)来实现。以下是一个基于浮动的CSS示例: ```css ....

    2个div并列

    `可以使`div`向左浮动,这样它们就会并排显示,直到没有空间容纳更多元素为止。不过,这种方法可能会导致父元素高度塌陷,需要额外处理。 ```css div { float: left; } ``` 2. **使用Flexbox布局**:Flexbox...

    Div+CSS简单布局

    1. **Float布局**:设置`float: left`或`float: right`可以使Div元素向左或向右浮动,从而实现并排显示。但需要注意清除浮动(`clear:both`)以防止父元素高度塌陷。 2. **Flex布局**:使用`flex-direction: row`,...

    div+CSS 多排多列的显示东西.不使用LI

    在多列布局中,我们可以创建多个`div`元素,将它们设置为浮动或者使用Flexbox或Grid布局来实现并排放置。 1. **浮动布局**:在传统的CSS布局中,`float`属性常被用来创建多列。例如,你可以设置`float:left`让`div`...

    div+css整体布局

    这样,两个`div`会并排显示,形成一个整体布局。 四、清除浮动 由于`float`会使元素脱离正常文档流,可能会导致父元素无法正确包裹其内部浮动元素,此时需要使用`clear`属性来解决。常见的做法是在最后添加一个清...

    as3.0富文本,可以插入表情图片,图文并排

    例如,我们可以设置`float:left`使每个元素左对齐并排显示: ```actionscript var textAndImageHTML:String = "&lt;div style='float:left'&gt;" + 文本内容 + "&lt;/div&gt;" + "&lt;div style='float:left'&gt;表情图片SWF的库...

Global site tag (gtag.js) - Google Analytics