两个div横向排列,顶端对齐的方式。

1、左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>

<title>无标题文档</title>

<style type="text/css">

* { margin: 0; padding:0;}

.left {

float:
left;

width: 200px;

height: 200px;

background:#009966;

}

.right {

height: 200px;

background: #FF6633;

float:left;

}

</style>

</head>

<body>

<div class="left">I am left</div>

<div class="right">I am right</div>

</body>

</html>

2、只有左侧div设置为float:left,右侧div设置overflow:auto;,右侧div将会占据整个右侧剩余宽度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>

<title>无标题文档</title>

<style type="text/css">

* { margin: 0; padding:0;}

.left {

float:
left;

width: 200px;

height: 200px;

background:#009966;

}

.right {

height: 200px;

background: #FF6633;

overflow:auto;

}

</style>

</head>

<body>

<div class="left">I am left</div>

<div class="right">I am right</div>

</body>

</html>

3、两个div都设置为display:
inline-block;这样可能会出现两个div顶端不对齐的情况,可以在右侧div设置vertical-align: top;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>

<title>无标题文档</title>

<style type="text/css">

* { margin: 0; padding:0;}

.left {

display:
inline-block;

width: 200px;

height: 200px;

background:#009966;

}

.right {

height: 200px;

background: #FF6633;

display:
inline-block;

vertical-align: top;   //与左侧div顶部对齐

}

</style>

</head>

<body>

<div class="left">I am left</div>

<div class="right">I am right</div>

</body>

</html>

两个div横向排列,顶端对齐的方式。

时间: 2024-10-12 03:32:55

两个div横向排列,顶端对齐的方式。的相关文章

HTML+CSS-如何定义让两个div横向排列

方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inline就不会换新行了. <div style="background-color:#ff0000;display:inline;">aaa</div> <div style="background-color:#ffff00;display:inline

如何定义让两个div横向排列

方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inline就不会换新行了. <div style="display:inline;">aaa</div><div style="display:inline;">bbb</div> 方法二: 这里使用float:right属性.f

如何让div横向排列

方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inline就不会换新行了. <div style="display:inline;">aaa</div><div style="display:inline;">bbb</div> 方法二: 这里使用float:right属性.f

DIV横向排列_CSS如何让多个div盒子并排同行显示

如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决div独占一行方法通常有两种,一种为设置浮动,另外一种为设置display样式.接下来为大家通过文章+图片+案例方法介绍解决div盒子对象并排横向排列且同行显示方法. 一.使用css float并排显示 我们对div设置一个float浮动属性即可解决不并排显示,只要你的并排div盒子总宽度小于或等于

面试题:两个UILabel横向排列,要求压缩其中一个Label,另外一个Label的内容保持完整

一.题目 AutoLayout中,布局两个UILabel,竖直方向处于统一水平线上:水平方向,二者间隔一定距离,左边的label距离父容器一定间距,右边的label距离容器右侧一定间隔 要求,两个label填充内容的时候,压缩其中一个,另外一个不变 二.解答 在Autolayout中,类似UIScrollView,只要设定容器的子view,宽度以及与容器的间隔,那么容器在宽度上能够自动wrap content,同理在数值方向上也是这样. 如下的约束: 左边的label距离父容器左边距为大于等于0

css实现内容不相同的左右两个div等高

问题提出 现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢? 下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来. 方法一 通过父元素设置 overflow:hidden, div自己设置padding-bottom 和 margin-bottom来实现. <div id="#warp"> <div class="left"> <br> <br> &l

横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的 话,两个浏览器下会有区别,具体有一个会产生间隙.兼容做法就是都设置float属性.但是记住有设置过float就要将float clear掉,不然下面的div会叠在已float的div上.我通常把清除浮动写成单独的<div clas

css如何实现让两个div在同一行排列

css如何实现让两个div在同一行排列:让两个div元素在同一行排列是基本的操作,实现也非常的简单,可能会对初学者有所帮助.一.使用功能浮动方式:代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

inline-block横向排列元素间隔原因及去除间隔方法

1.问题出现的场景: 需要实现上面的布局,三张图横向排列,左图靠左,右图靠右,中间图居于中间,且图与图之间有固定间隔,起初通过如下方式实现(为了说明方便,直接通过内联样式表现): <div style="width:100%;overflow:auto;"> <div style="width:32%;float:left"><img style="width:100%" src=" "/>