Вопрос CSS: средний блок, чтобы заполнить всю пустую область - PullRequest
Новая
       0

Вопрос CSS: средний блок, чтобы заполнить всю пустую область

2 голосов
/ 06 августа 2010

У меня есть три элемента div, и я хочу, чтобы два элемента div занимали только пространство, требуемое их содержимым, а средний элемент div должен быть максимально широким. Это конечно в одном ряду и с CSS.

Код выглядит примерно так: 

<div class='wrapper'>
  <div class='small'>Left/div>
  <div class='big'>Big</div>
  <div class='small'>Right</div>
</div>

Есть какие-нибудь подсказки?

Ответы [ 4 ]

4 голосов
/ 06 августа 2010
1 голос
/ 06 августа 2010

Идеально подходит для начала работы с жидкостью 3 колонки. Вы также можете попробовать что-то вроде этого, что очень похоже на это. 

<html>
<head>
    <title></title>
<style type="text/css">
    .small1 {
    float: left;
    width: 20%;
    height:100%;
    }

    .small2 {
    float: right;
    width: 20%;
    height: 100%;
    }

    .big {
        width: 60%;
        height: 100%;
        margin-left: 20%;}
    </style>
</head>
 <body>



  <div class='small1'>Small1</div>
    <div class='small2'>Small2</div>
  <div class='big'>Large</div>

</body>
</html>

Отредактировано из-за небольшой ошибки разметки.

0 голосов
/ 06 августа 2010

Посмотрите на эту статью ::: http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

0 голосов
/ 06 августа 2010

вы также можете использовать несколько оберток (так будет проще устанавливать фоны) 

<head>
<style>
    .wrapper{background-color:black;}
    .wrapperLeft{float:left;background-color:blue;width:70%}
    .small{float:left;width:20%;background-color:red;}
</style>
</head>
<body>
    <div class='wrapper'>
      <div class='wrapperLeft'>
         <div class='small'>Left</div>
         <div class='big'>Big</div>
      </div>
      <div class='small'>Right</div>
    </div>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...