Переключение с таблиц на divs с CSS

У меня есть HTML-таблица на моей странице, которую я пытаюсь заменить на div и CSS. В принципе, это таблица 3x3 с масштабируемым контентом в срединном и фиксированном размерах краях и углах с изображениями в фоновом режиме, чтобы придать всем привлекательный внешний вид.Переключение с таблиц на divs с CSS

Я читал много статей и статей о смешивании% с пикселями, но ни у кого из них, похоже, нет только того, что я ищу.

Вот что я до сих пор:

<html> 
<body> 
    <p>Text up here...</p> 
    <div style="height: 200px; background-color: red; "> 
    <div style="width: 80%; height: 100%;"> 
    <div style="clear: both; height: 100%;"> 
    <div style="float: left; width: 30px; height: 100%; background-color: green;">L</div> 
    <div style="margin-left: 30px; margin-right: 30px; height: 100%; background-color: yellow;">This is my Content! 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
    <div style="float: right; width: 30px; height: 100%; background-color: blue;">R</div> 
     </div> 
    </div> 
    </div> 
    <p>Text down here...</p> 
</body> 
</html>

Как я могу получить синий DIV рядом с желтым один? Я могу быть совершенно вне базы. Я был бы очень признателен за любую помощь.

источник

2009-10-17 Eric the Red

Если семантический порядок не важен, он работает, чтобы переместить правильный DIV над содержанием DIV:

<div style="float: left; width: 30px; height: 100%; background-color: green;">L</div> 
<div style="float: right; width: 30px; height: 100%; background-color: blue;">R</div> 
<div style="margin-left: 30px; margin-right: 30px; height: 100%; background-color: yellow;">This is my Content!...</div>

источник

2009-10-17 22:34:17 Joel

Вы хотите использовать three-column negative margin trick (demo).

источник

2009-10-17 22:32:45

Жаль быть тупым, но вы собираетесь об этом неправильном пути. Вопрос не в одной из «таблиц против div», это одна из «таблиц против веб-стандартов». Очень заманчиво, когда вы начинаете с CSS, чтобы обернуть все в <div> и сделать с ним, когда действительно нужно использовать правильный HTML-элемент для представления содержащихся в нем данных и использовать CSS для его стилизации.

Имея это в виду, каково фактическое содержание страницы? Это список данных? Серия абзацев? Может быть, это фактически табличные данные, и в этом случае таблица является правильным выбором? После того, как вы определили это и написали соответствующий HTML-код, вы можете начать с CSS. Иногда вы, возможно, придется добавить дополнительные элементы HTML для достижения стиль вам нужно, это хорошо до тех пор, как вы уже хэшированного структуру и думали долго и упорно о таких элементах.

источник

2009-10-17 22:37:21 roryf

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

В этом случае я бы подумал об использовании повторяющегося изображения (то есть достаточно широкого, чтобы соответствовать большинству разрешений, но высотой 1px) и установить это как фон для контейнера div. – roryf

К сожалению, это не помогает с закругленными углами. –

<!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> 
<title>:)</title> 
<body> 
    <p>Text up here...</p> 
    <div style="height: 200px; background-color: red;"> 
    <div style="height: 100%; margin-right: 20%;"> 
     <div style="float: left; width: 30px; height: 100%; background-color: green;">L</div> 
     <div style="float: left; width: 80%; height: 100%; background-color: yellow;"> 

This is my Content! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

     </div> 
     <div style="float: left; width: 30px; height: 100%; background-color: blue;">R</div> 
     <div style="clear: both;"></div> 
    </div> 
    </div> 
    <p>Text down here...</p> 
</body> 
</html>

источник

2009-10-17 22:52:09 echo

Если вы хотите округлить углы, это может быть хорошей идеей.

HTML:

<div class="box"> 
    content here 
    <div class="topleft corner"></div> 
    <div class="topright corner"></div> 
    <div class="bottomleft corner"></div> 
    <div class="bottomright corner"></div> 
</div>

CSS

.box{ 
padding:50px; 
position:relative; /*this allows positioning child elements relative to this one*/ 
} 

.corner{ position:absolute; width:50px;} 

.topleft{ top:0; left:0; background-image:url(tlcorner.gif);} 
.topright{ top:0; right:0; background-image:url(trcorner.gif);} 
.bottomleft{ bottom:0; left:0; background-image:url(blcorner.gif);} 
.bottomright{ bottom:0; right:0; background-image:url(brcorner.gif);}

источник

2009-10-18 07:47:21 Soska

В качестве альтернативы, используйте одно изображение со всеми четырьмя углами и используйте «background-position», чтобы отобразить правый угол. – DisgruntledGoat

Да!использование спрайтов будет правильным подходом. Добавление дополнительных divs с помощью JavaScript и обслуживание их только в IE, при использовании радиуса границы, где поддерживается, будет еще лучше. Но, знаете, детские шаги. – Soska

В W3C несколько предстоящих решений. В настоящее время в Chrome, Firefox и Internet Explorer реализована самая близкая соответствующая вам потребность (http://dev.w3.org/csswg/css3-grid-layout).

CSS Grid layout

источник

2012-10-16 11:04:35

ответ

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