HTML, CSS с центром Div проблема - PullRequest
Новая
       29

HTML, CSS с центром Div проблема

0 голосов
/ 13 марта 2011

Я хотел бы создать центрированную HTML-страницу с тремя разделенными столбцами (разными цветами).Я не могу найти решение для моего # container1 в css.Красный цвет распространяется с левой стороны (за пределы центрированной страницы).Вот оно: http://imgur.com/D3ZAV Может кто-нибудь, пожалуйста, помогите мне?спасибо 

   <body>
    <div id="cela">
      <div id="header">
      <p>hlavicka</p>
      </div>
      <div id="container3">
        <div id="container2">
          <div id="container1">
                    <div id="lavy"><p>Etiam ante est</p></div>
        <div id="stredny"><p>Mauris orci erat</p></div>
        <div id="pravy"><p>Quisque tincidunt congue orci, </p></div>
           </div>
        </div>
      </div>
      <div id="footer">
      <p>footer</p>
      </div>  
    </div>
  </body>

CSS-файл 

#cela {
width: 80%;
margin-left: auto;
margin-right: auto;
border: 1px #110000 solid;
}
#header
{
padding:20px;
background:#008000;
}
#footer
{
clear: both;
padding:20px;
background:#008000;
}
#container3 {
    float:left;
    width:100%;
    background:green;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#container0 {
    float:left;
    width:100%;
    background:white;
    position:relative;
    right:0%;
    }
#lavy
{
    float:left;
    width:30%;
    position:relative;
    left:70%;
}
#stredny
{
    float:left;
    width:40%;
    position:relative;
    left:70%;
}
#pravy
{
    float:left;
    width:30%;
    position:relative;
    left:70%;
}

(извините за плохое форматирование, я не могу понять, почему это так хреново)

1 Ответ

2 голосов
/ 13 марта 2011

Вам действительно нужно пересмотреть свой подход к этой проблеме.

Я бы посоветовал: 3 плавающих элемента div, завернутые в контейнер. 

<div id="container">
  <div id="column1">Lorem ipsum</div>
  <div id="column2">Dolor sit amet</div>
  <div id="column3">Mauris orci</div>
</div>

А что касается вашего CSS, естьНесколько важных вещей, на которых вы можете построить: 

#container {
  overflow: hidden; //this will clear the floated columns
  width: 960px;
}

#column1 {
  float: left;
  width: 320px;
  background: #f00;
}

#column2 {
  float: left;
  width: 320px;
  background: #0f0;
}  

#column3 {
  float: left;
  width: 320px;
  background: #00f;
}

По существу:

  • Оберните поплавки и очистите их, используя overflow: hidden;
  • Общая ширинаfloat равен ширине контейнера
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...