Проблема CSS с плавающей точкой - PullRequest
Новая
       26

Проблема CSS с плавающей точкой

1 голос
/ 18 сентября 2011

Хорошо, я полностью отстой в CSS.Но мне нужно это сделать.

Вы можете увидеть мою проблему на http://www.eresig.tk, Я пытаюсь сделать div с "Lorem ipsum", а другой с "Testing4" на той же высоте.

Я не хочу использовать абсолютную позицию, я хочу сделать это с плавающей точкой.РЕДАКТИРОВАТЬ: У меня есть ответ, который я искал.

Ответы [ 4 ]

1 голос
/ 18 сентября 2011

Если я правильно понял ваш вопрос, вы хотите, чтобы div с Testing 4 был рядом с Lorem ipsum. В этом случае вам нужно установить конкретную ширину для ваших divs. Пока вы оставите ширину неуказанной, по умолчанию они будут равны 100%, а деление Testing 4 будет падать ниже другого.

Я также не видел поплавка в вашем Lorem Ipsum div.

0 голосов
/ 18 сентября 2011

попробуйте это CSS: 

#loremipsum{
float: left;
width:50%;
background-color: yellow;
padding-bottom: 500px;
margin-bottom: -500px;
}


#testing4{
float: right;
width:50%;
background-color: red;
padding-bottom: 500px;
margin-bottom: -500px;
}

HTML: 

<div style="overflow: hidden;">
  <div id="loremipsum"></div>
  <div id="testing4"></div>
</div>
0 голосов
/ 18 сентября 2011

Если я правильно понял ваш вопрос,

Ваш CSS должен выглядеть так: 

#container {width:100%; height:auto; overflow: hidden;}
#content-left {width:50%; float:left}
#content-right {width:50%; float:left}

И HTML-разметка 

<div id="container">
   <div id="content-left"></div>
   <div id="content-right"></div>
</div>

Полный код 

<html>
<head>
<style>
#container {width:100%; height:auto}
#content-left {width:50%; float:left; height:50px; background-color:black}
#content-right {width:50%; float:left; height:50px; background-color:red}
</style>
</head>
<div id="container">
   <div id="content-left"></div>
   <div id="content-right"></div>
</div>

</html>

* примечание: я добавил height:50px; background-color:black, чтобы увидеть результат.Конечно, вы можете удалить этот код

А вот пример http://jsfiddle.net/QbLgu/

Это основные вещи, которые ДОЛЖЕН ЗНАТЬ каждый webdev.Вы должны изучить основы.Попробуйте исследовать, прежде чем задавать вопрос по SO

0 голосов
/ 18 сентября 2011

Я рекомендую вам прочитать эти сообщения:

Жидкость Ширина Равная высота Колонны CSS

...