Центрированный DIV и внешний DIVS

Это 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 использовали оставшуюся ширину?


html css css-float
person Patrick Bläcker    schedule 01.12.2011    source источник
comment
Почему поплавок? Вы пробовали использовать проценты?   -  person    schedule 01.12.2011
comment
Является ли фактическая цель гибким макетом из 3 колонок с центральной колонкой 500 пикселей или что-то еще?   -  person Wesley Murch    schedule 01.12.2011
comment
как вы центрируете центр??   -  person MCSI    schedule 01.12.2011
comment
Справа макет из 3 столбцов с центральным столбцом   -  person Patrick Bläcker    schedule 01.12.2011

Ответы (2)


arrow_upward
2
arrow_downward

3-колоночный гибкий макет с центральной колонкой 500 пикселей

Это сложный макет, конечно. Я нашел эту демонстрационную страницу, которая эмулирует ее:

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, поскольку ваш основной контент находится выше в исходном коде страницы). Хотя это не готовый к производству макет, он должен помочь вам начать работу.

person Wesley Murch    schedule 01.12.2011
comment
спасибо, это здорово :) я попробую это, но выглядит очень хорошо. - person Patrick Bläcker; 03.12.2011

arrow_upward
0
arrow_downward

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>
person G0back    schedule 01.12.2011
comment
я хочу использовать 100% размера браузера, поэтому я не знаю ширину внешних элементов div. Это проблема. - person Patrick Bläcker; 01.12.2011