求助多个不同高度DIV浮动问题(页 1) - CSS提问(问题解决)区 - CSS论坛

zhuweijian 发表于 2011-11-27 21:34

求助多个不同高度DIV浮动问题

多个不同高度的DIV浮动后排列很乱，请看效果图：
[attach]342[/attach]

我想要的效果：
[attach]343[/attach]

请大家帮帮忙

飞翔的蜗牛 发表于 2011-11-28 09:10

你先定义两个大DIV一个左浮动,一个右浮动.然后在把左边的那三个放在左浮动的里面,把右边两个放在右浮动里面.

北京手绘墙 发表于 2012-3-19 14:54

实在不行你就直接用table吧曾不多的话 table方便点。。。div代码不好调。。比较麻烦

shing993322 发表于 2012-3-22 14:25

試試看 :

[b]border.html :[/b]

<!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" />
<link href="border.css" rel="stylesheet" type="text/css" />
<title>測試邊框</title>
</head>
<body>
<div id="outer">
<div id="left">
   <div id="top"><p>This is left top.</p>
   </div>
   <div id="middle"><p>This is left middle.</p>
   </div>
   <div id="below"><p>This is left footer.</p>
   </div>
</div>
<div id="right">
   <div id="r_top"><p>This is right top.</p>
   </div>
   <div id="r_middle"><p>This is right footer.</p>
   </div>
</div>
</div>
</body>
</html>

[b]border.css :[/b]

@charset "utf-8";
/* CSS Document */
body
{
font-family: Arial, sans-serif;
font-size: 18pt;
color: #666;
margin-left:15%;
margin-right:15%;
}

p
{
float:left;
margin-top:20px;
margin-left:10px;
font-size:24px;
}

/* 大框 */

#outer
{
padding: 0em;
margin: 0em;
width: 100%;
}

/* Left */

#left
{
position: relative;
float:left;
width:48%;
margin-right:15px;
}

#top
{
float:left;
width:100%;
height:600px;
margin-bottom:10px;
background-color:#3F0;
}

#middle
{
float:left;
width:100%;
height:400px;
margin-bottom:10px;
background-color:#3F0;
}

#below
{
float:left;
width:100%;
height:176px;
background-color:#3F0;
}

/* Right */

#right
{
position: relative;
float:left;
width:48%;
}

#r_top
{
height:800px;
margin-bottom:10px;
background-color:#900;
}

#r_middle
{
background-color:#900;
height:300px;
}

我也在學習中 , 一起來加油吧 ~ :)

caojie1989cao 发表于 2012-4-27 09:16

回复 1# zhuweijian 的帖子

最好的办法是：
给左边定义一个div ，左浮动。给右边定义一个div，有浮动。这样就解决了。
<div  class="kuai_left">
               <div  class="artic"></div>
               <div  class="artic"></div>
               <div  class="artic"></div>

      </div>
      <div  class="kuai_right">
               <div  class="artic"></div>
               <div  class="artic"></div>

      </div>
要是有问题的话，可以来我的博客给我留言（曹杰seo博客[url]www.cj8seo.com[/url]）。

as0303 发表于 2012-4-28 16:00

把左边的三个放在一个class为left的DIV 里
把右边的两个块放在一个class为right的DIV里
然后一个左浮动一个右浮动就行了

页: [1]

CSS论坛's Archiver

求助多个不同高度DIV浮动问题

回复

回复 1# zhuweijian 的帖子