Имея левый и правый поля содержимого css

У меня есть html-документ и файл css с ним. Вот что секция кода я работаю выглядит следующим образом:Имея левый и правый поля содержимого css

<div class="contentcenter"> 
    <div class="contentleft"> 
     <h1>Left</h1> 
     <p>Pellentesque habitant morbi ...</p> 
    </div> 

    <div class="contentright"> 
     <h1>Right</h1> 
     <p>Pellentesque habitant morbi ...</p> 
    </div> 
</div>

У меня есть картина, которая 1000px шириной по центру над этими элементами, и я хочу, чтобы левый элемент для выравнивания в центре страницы, так что он начинается с самого левого края изображения по направлению к середине, имеет зазор, а затем имеет нужный элементный дисплей и достигает самой правой границы изображения. например

|--------------Picture--------------------------| 
|            | 
|            | 
|            | 
|            | 
|            | 
|            | 
|            | 
|            | 
|-----------------------------------------------| 

|--left--------------| |-------right---------| 
|     | |      | 
|     | |      | 
|     | |      | 
|     | |      | 
|--------------------| |---------------------|

Все это, будет сосредоточено на странице. Вот мой css, но это не дает мне результат, который я ищу.

.contentcenter 
{ 
    margin:0 auto; 
    padding:0; 
    width=1000px; 
    border:3px solid red; 
} 
.contentleft, 
.contentright 
{ 
    position:inherit; 
    float:left; 
    margin: 50px auto; 
    width:auto; 
    max-width:450px; 
    border:3px solid #00CD00; 
    padding:0; 
    font-family:Arial, Times, serif; 
} 
.contentleft h1, 
.contentright h1 
{ 
    margin:0; 
    padding:0; 
    color:white; 
    font-family:Arial; 
    display:block; 
    background-color:#00CD00; 
    padding: 5px 0; 
}

источник

2013-05-05 E.Cross

Вид знать проблему, кроме наличия левого и правого окна начинайте с левого и правого. Вы хотите, чтобы все содержимое, чтобы быть в центре, а

Мое решение здесь идет: http://jsfiddle.net/rvjd7/

Перед тем, как приступить к объяснению код:

ширина = 1000px не имеет смысла в CSS. она должна быть ширина: 1000px (с двоеточием)
ваш HTML является тот же
Вот ваш CSS: обратите внимание, что один ящик поплыл влево, а другой один сплавляется вправо. contentcenter однако передается переполнение: auto, так что он может содержать двух плавающих детей contentleft и contentright.

.рисунок { ширина: 1000px; margin: 0 auto; }

.contentcenter 
{ 
margin:0 auto; 
padding:0; 
width:1000px; 
background-color:lightgrey; 
overflow:auto; 
} 
.contentleft, 
.contentright 
{ 
position:inherit; 
float:left; 
margin: 0px 0px 50px 0px; 
width:auto; 
max-width:450px; 
border:3px solid #00CD00; 
padding:0; 
font-family:Arial, Times, serif; 
} 
.contentright 
{ 
position:inherit; 
float:right; 
margin: 0px 0px 50px 0px; 
width:auto; 
max-width:450px; 
border:3px solid #00CD00; 
padding:0; 
font-family:Arial, Times, serif; 
} 
.contentleft h1, 
.contentright h1 
{ 
margin:0; 
padding:0; 
color:white; 
font-family:Arial; 
display:block; 
background-color:#00CD00; 
padding: 5px 0; 
}

источник

2013-05-05 06:39:22 AdityaSaxena

Вот небольшая модификация кода, чтобы дать то, что вы хотите:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
.contentcenter 
{ 
margin:0 auto; 
padding:0; 
width:1000px; 
border:3px solid red; 
overflow: hidden; 
} 

.contentleft {float: left;} 

.contentright {float: right;} 

.contentleft, .contentright 
{ 
width:450px; 
border:3px solid #00CD00; 
padding:0; 
font-family:Arial, Times, serif; 
} 

.contentleft h1, .contentright h1 
{ 
margin:0; 
padding:0; 
color:white; 
font-family:Arial; 
display:block; 
background-color:#00CD00; 
padding: 5px 0; 
} 
</style> 

</head> 
<body> 

<div class="contentcenter"> 
    <div class="contentleft"> 
     <h1>Left</h1> 
     <p>Pellentesque habitant morbi ...</p> 
    </div> 

    <div class="contentright"> 
     <h1>Right</h1> 
     <p>Pellentesque habitant morbi ...</p> 
    </div> 
</div> 

</body> 
</html>

Одним из главных опечатка у вас был width=1000px;, который должен быть width: 1000px;. Помимо этого, самое главное - поплавать ящиками в разных направлениях.

Вот пример с DIV, который имитирует изображение, которое вы mentionsed:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
.contentcenter 
{ 
margin:0 auto; 
padding:0; 
width:1000px; 
border:3px solid red; 
overflow: hidden; 
} 

.contentleft {float: left;} 

.contentright {float: right;} 

.contentleft, .contentright 
{ 
width:450px; 
border:3px solid #00CD00; 
padding:0; 
font-family:Arial, Times, serif; 
} 

.contentleft h1, .contentright h1 
{ 
margin:0; 
padding:0; 
color:white; 
font-family:Arial; 
display:block; 
background-color:#00CD00; 
padding: 5px 0; 
} 

.img {height: 200px; background: #e7e7e7; margin-bottom: 30px;} 
</style> 

</head> 
<body> 

<div class="contentcenter"> 
    <div class="img"></div> 
    <div class="contentleft"> 
     <h1>Left</h1> 
     <p>Pellentesque habitant morbi ...</p> 
    </div> 

    <div class="contentright"> 
     <h1>Right</h1> 
     <p>Pellentesque habitant morbi ...</p> 
    </div> 
</div> 

</body> 
</html>

источник

2013-05-05 03:47:49

Вы близки: убедитесь, что в float:right на правых делах. Я бы рекомендовал обернуть все это в div контейнера, чтобы вы могли установить ширину один раз и все это соответствовало. Вот пример скелетное:

HTML

<div id="content"> 
    <div class="imgHold"> 
     <img src="[ ... ]" /> 
    </div> 
    <div class="contentcenter"> 
     <div class="contentleft"> 
      [ ... ] 
     </div> 

     <div class="contentright"> 
      [ ... ] 
     </div> 
    </div> 
</div>

CSS

#content{ 
    width:1000px; 
} 
.contentleft, 
.contentright{ 
    float:left; 
    width:49%; /* set this to any value you need */ 
} 
.contentright{ 
    float:right; 
    /* You could add width here again if you want them different widths */ 
}

http://jsfiddle.net/daCrosby/faVRa/

источник

2013-05-05 04:22:13 DACrosby

Имея левый и правый поля содержимого css

ответ

Смежные вопросы