`
yanzilee9292
  • 浏览: 531284 次
  • 性别: 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>
 
分享到：
| js 取数组最大值、最小值
评论
发表评论

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

相关推荐

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

    让两个Div并排显示的方法有很多，使用display的inline属性、通过设置float来让Div并排显示都可以实现，感兴趣的朋友可以参考下本

    两个div并排的实现代码

    两个div并排的实现代码，一般在使用过程中，最好外面再包括一个用来定位居中显示。这里主要是了解下css的左右浮动布局给开始学习css的朋友。

    行元素并排

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

    div 2列和3列显示

    NULL 博文链接：https://huangdonghui.iteye.com/blog/586834

    div的position属性

    块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。 3.层模型--绝对定位 如果想为元素设置层模型中的绝对定位，需要设置position:...

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

    复制代码代码如下: &lt;style&gt; .box1 {width:70%; float:left; display:inline;} .box2 {width:30%;... &lt;div class=”container”&gt; &lt;div class=”box1″&gt;121212&lt;/div&gt; &lt;div class=”box2″&gt;455656&lt;/div&gt; &lt;/div&gt;

    CSS让子容器超出父元素(子容器悬浮在父容器效果)

    第一步：父容器定位设置为 relative（相对定位）。 第二步：子容器定位设置为 absolute（绝对定位）。 &lt;div id=a&gt; &lt;div id=b&gt;我要浮出去！&lt;/div&gt; &lt;/div&gt; #a{ width:400px; height:100px; background:rgb(0, 0,...

    CSS 将两个button按钮垂直+水平居中

    这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 **margin:auto;**使块级元素垂直居中是很简单的。 .vert-center{ position:...

    div+css table布局实现代码

    下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧 许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格...

    清除css浮动的三种方法小结

    在网页布局的时候有时需要元素并排显示，如果不选择浮动，那么那些块状元素就会一行一行显示，占用空间不说，用户体验也是极为不好的。 以下是没有浮动的元素代码 &lt;div class=“box”&gt; &lt;div class=“box01”&gt;&lt;/div...

    html+css考试题.docx

    19．要使表格的边框不显示，应设置 border 的值是( B)。A．1B．0C．2D．3 知识点：HTML 表格边框设置 在 HTML 中，要使表格的边框不显示，应设置 border 的值为 0。 20．在 HTML 中，(B )不是的目标属性。A.selfB...

    js加入购物车抛物线动画与购物车效果特效

    接着，将商品信息html结构布置好，本例中，我们用四个商品并排布置，每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。 复制代码 代码如下: &lt;div class="box"&gt; ￥&lt;span&gt;3499.00&lt;/span&gt;&lt;/h4&gt; ...

    vue 实现走马灯效果

    Part.1 问题 在写一个H5页面时遇到一个需求，头部公告需要滚动变换，... &lt;div class=home&gt; &lt;div class=home-box&gt; &lt;div xss=removed&gt; &lt;div class=marquee&gt; &lt;div class=marquee_box&gt; &lt;ul class=marquee_list

    js使用小技巧

    并排显示 display:inline 隐藏焦点 hidefocus=true 根据宽度换行 style="word-break:break-all" 自动刷新 ;URL=http://c98.yeah.net"&gt; 简单邮件 &lt;a href="mailto:aaa@bbb.com?subject=ccc&body=xxxyyy"&gt; ...

    LeafletSliderTemplate:一个可重复使用的传单地图模板，用于创建前后地图效果

    并排使用两张地图，或在模板的默认版本中，在基本地图上显示两组图块。 Slider 适用于 Chrome、Safari、Firefox 和 IE，并且具有响应性和移动友好性。 查看的已发布项目。 它使用什么 展示地图的 作为一个移动友好...

    css布局实例:网页布局的方法

    许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。　但是你又不喜欢用table来实现他，...

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