居中 DIV 和外部 DIVS

发布于 2024-12-18 19:43:11 字数 399 浏览 2 评论 0原文

这是 HTML 代码

<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

中心 Div 具有固定宽度左右 div 应该使用剩余宽度

CSS：

.left { float: left; }
.center { width: 500px; float: left; }
.right { float: right; }

左右 div 使用剩余宽度我该怎么办？

原文

This is the HTML Code

<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

The Center Div got a fixed width the left and right div should use the remaining width

The CSS:

.left { float: left; }
.center { width: 500px; float: left; }
.right { float: right; }

What can i do that the left and right div uses the remaining width?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

故事未完 2024-12-25 19:43:11

具有 500px 中心列的 3 列流体布局

这无疑是一个困难的布局。我发现这个模拟它的演示页面：

http://www.gunlaug.no/tos/moa_27c .html

并且能够使用相当少量的 CSS 和 HTML 进行重现（您将必须更改您的标记）。演示： http://jsfiddle.net/jAsMx/

<div id="side1">
    <div class="col">
        <p>First</p>
    </div>
    <div>
        <p>Second</p>
    </div>
</div>
<div id="side2">
    <div class="col">
        <p>Third</p>
    </div>
</div>

#side1 {
    width: 50%;
    float: left;
    margin: 0 -260px 0 0;
    background: #fff;
    padding: 0 0 10px;
}
#side1 div {
    margin: 0 250px 0 0;
    min-height: 300px;
    background: #dda;
}
#side2 {
    width: 50%;
    float: right;
    margin: 0 0 0 -260px;
    background: #fff;
}
#side2 .col {
    background: #dda;
    margin: 0 0 0 250px;
}
#side1 .col {
    background: #fea;
    width: 500px;
    float: right;
    margin: 0 -250px 0 0 ;
    position: relative;
}
.col {
    /* For backgrounds: This is not an equal height layout yet... */
    min-height: 300px;
}

在此处输入图像描述

它使用负边距来补偿中心列的固定宽度和 2-1-3 列排序（这提供了较小的 SEO 提升，如您的主要内容在页面源代码中更高）。虽然这不是“准备生产”的布局，但它应该可以帮助您入门。

3 column fluid layout with a 500px center column

This is a difficult layout for sure. I found this demo page that emulates it:

http://www.gunlaug.no/tos/moa_27c.html

And was able to reproduce with a fairly small amount of CSS and HTML (you will have to change your markup). Demo: http://jsfiddle.net/jAsMx/

<div id="side1">
    <div class="col">
        <p>First</p>
    </div>
    <div>
        <p>Second</p>
    </div>
</div>
<div id="side2">
    <div class="col">
        <p>Third</p>
    </div>
</div>

#side1 {
    width: 50%;
    float: left;
    margin: 0 -260px 0 0;
    background: #fff;
    padding: 0 0 10px;
}
#side1 div {
    margin: 0 250px 0 0;
    min-height: 300px;
    background: #dda;
}
#side2 {
    width: 50%;
    float: right;
    margin: 0 0 0 -260px;
    background: #fff;
}
#side2 .col {
    background: #dda;
    margin: 0 0 0 250px;
}
#side1 .col {
    background: #fea;
    width: 500px;
    float: right;
    margin: 0 -250px 0 0 ;
    position: relative;
}
.col {
    /* For backgrounds: This is not an equal height layout yet... */
    min-height: 300px;
}

enter image description here

It uses negative margins to compensate for the fixed width of the center column, and 2-1-3 column ordering (which provides a minor SEO boost, as your main content is higher in the page source). While this is not a "ready-for-production" layout, it should get you started.

回复收藏 0 原文

幻想少年梦 2024-12-25 19:43:11

A:指定父DIV的宽度
B:为子DIV分配合适的宽度
C：牢记模型概念（http://www.w3schools.com/css/css_boxmodel.asp）

看看这个：

<!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>Untitled Document</title>
<style type="text/css">
.wrap{
    width:950px;
    margin:0 auto;
    }
.left { float: left; border:1px solid red;height:400px; width:222px; }
.center { width: 500px; float: left; border:1px solid blue;height:400px; }
.right { float: right; border:1px solid green; height:400px; width:222px; }
</style>
</head>
<body>
<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

::第二个评论答案::
我通过 Javascript 编写了一段代码来解决您的问题，测试一下：

<!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>Untitled Document</title>

<style type="text/css">

#wrap{

    width:100%;

    margin:0 auto;

    border:1px solid #FFFF00;

    }

#left { float: left; border:1px solid red;height:400px; width:222px; }

#center { width: 500px; float: left; border:1px solid blue;height:400px; }

#right { float: right; border:1px solid green; height:400px; width:222px; }

</style>

</head>

<body>

<div id="wrap">

    <div id="left"></div>

    <div id="center"></div>

    <div id="right"></div>

</div>



</body>

</html> 

<script type="text/javascript">

document.getElementById('center').style.width = '500px';

var wrapWidth = (document.getElementById('wrap').style.width = 
window.innerWidth+'px').split('px');

var centerWidth =(document.getElementById('center').style.width).split('px');

var rightLeft =((wrapWidth[0] - centerWidth[0])-6)/2;

document.getElementById('right').style.width 
=document.getElementById('left').style.width = rightLeft+'px' ;



    </script>

A:specify width to parent DIV
B:devide suitable width to child DIVs
C:keep in your mind box Model Concept(http://www.w3schools.com/css/css_boxmodel.asp)

look at this:

<!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>Untitled Document</title>
<style type="text/css">
.wrap{
    width:950px;
    margin:0 auto;
    }
.left { float: left; border:1px solid red;height:400px; width:222px; }
.center { width: 500px; float: left; border:1px solid blue;height:400px; }
.right { float: right; border:1px solid green; height:400px; width:222px; }
</style>
</head>
<body>
<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

::Second Answer For Comment::
i write a code via Javascript that solve your problem,test this:

<!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>Untitled Document</title>

<style type="text/css">

#wrap{

    width:100%;

    margin:0 auto;

    border:1px solid #FFFF00;

    }

#left { float: left; border:1px solid red;height:400px; width:222px; }

#center { width: 500px; float: left; border:1px solid blue;height:400px; }

#right { float: right; border:1px solid green; height:400px; width:222px; }

</style>

</head>

<body>

<div id="wrap">

    <div id="left"></div>

    <div id="center"></div>

    <div id="right"></div>

</div>



</body>

</html> 

<script type="text/javascript">

document.getElementById('center').style.width = '500px';

var wrapWidth = (document.getElementById('wrap').style.width = 
window.innerWidth+'px').split('px');

var centerWidth =(document.getElementById('center').style.width).split('px');

var rightLeft =((wrapWidth[0] - centerWidth[0])-6)/2;

document.getElementById('right').style.width 
=document.getElementById('left').style.width = rightLeft+'px' ;



    </script>

回复收藏 0 原文

~没有更多了~