Разделите стек друг на друга не вертикально: ненормальное поведение?

Итак, я ожидаю, что эти divs будут вести себя блочно-подобными и просто складывать друг на друга, как приятные маленькие элементы ... увы, это не так. Раньше у меня была эта проблема, и мне удалось ее исправить ... но я не знаю, как это происходит снова.Разделите стек друг на друга не вертикально: ненормальное поведение?

Когда я открываю файл html в chrome или firefox, таблица (в собственном div) отказывается играть хорошо и сидит под H1 (также в своем собственном div).

Обратите внимание, что для этой цели также должны быть центрированы и те, которые находятся внутри контейнера. Я также пытаюсь сделать этот сайт совместимым с HTML5. Кажется, много полезных вещей, которые не поддерживаются:/

Е. HTML:

<body> 

<div id="container"> 
    <div id="content" class="centered shadow"> 
    <div> 
    <h1 class="reddy centered">Welcome to Riverbank Removals</h1> 
    </div> 
    <br> 
    <div> 
    <table class="centered"> 
     <tr> 
     <td class="items centered">&nbsp;</td> 
     <td class="table_head centered">Mon-Wed</td> 
     <td class="table_head centered">Thurs-Fri</td> 
     </tr> 
     <tr> 
     <td class="items centered">2 Men &amp; a Truck</td> 
     <td class="price centered">Mon-Wed</td> 
     <td class="price centered">Thurs-Fri</td> 
     </tr> 
    </table> 
    </div>  
    </div> 
</div> 
</body>

Ye CSS:

body 
    { 
    background-image:url('bgd.gif'); 
    background-repeat:repeat; 
    background-color:#bb0000; 
    width:100%; 
    height:100%; 
    margin-left:auto; 
    margin-right:auto; 
    } 

#container 
    { 
    position:relative; 
    width:700px; 
    height:100%; 
    margin-left:auto; 
    margin-right:auto; 
    } 


#content 
    { 
    position:relative; 
    width:700px; 
    height:500px; 
    background-color:#ffffff;  
    } 

.reddy 
{ 
    color:#bb0000; 
} 

.price 
{ 
    position: relative; 
    width:100px; 
    font-size:16px; 
    color:#bb0000; 
} 
.items 
{ 
    position: relative; 
    width:100px; 
    font-size:14px; 
} 
.table_head 
    { 
    position: relative; 
    width:50px; 
    color:#bb0000; 
    font-size:3; 
    } 
.menu 
    { 
    position:relative; 
    width:280px; 
    height:120px; 
    background-color:#ffffff; 
    } 

.centered 
    { 
    /* Internet Explorer 10 */ 
    display:-ms-flexbox; 
    -ms-flex-pack:center; 
    -ms-flex-align:center; 

    /* Firefox */ 
    display:-moz-box; 
    -moz-box-pack:center; 
    -moz-box-align:center; 

    /* Safari, Opera, and Chrome */ 
    display:-webkit-box; 
    -webkit-box-pack:center; 
    -webkit-box-align:center; 

    /* W3C */ 
    display:box; 
    box-pack:center; 
    box-align:center; 

    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 

    margin-left:auto; 
    margin-right:auto;  


    } 
.shadow 
    { 
    box-shadow: 10px 10px 5px #000000; 
    }

источник

2013-09-08 Lex Woodfinger

Это ваш полный CSS? – Itay

да - полностью. Остальная часть страницы - это просто ссылка на CSS, в тегах заголовка и т. Д. –

Lex.

direction: row;

Вы пытаетесь построить строки, но вам нужны столбцы.

См. Jsfiddle для этого.

http://jsfiddle.net/9VxtJ/3/

Кроме того, вы должны прочитать эту спецификацию. http://dev.w3.org/csswg/css-flexbox/

источник

2013-09-08 08:05:53 MasterPoint

Это часть какой-то частичной вещи для создания элементов CSS-центра ... Я понятия не имею, что он делает или почему нет надежного и простого способа сказать, что «все здесь должно быть сосредоточено» ... например, мне нужна такая же функциональность

в основном корпусе, а также свойство align для тегов . –

jsfiddle - это круто! Хотя таблица на самом деле не табулирует ... EDIT: Это происходит, когда удаляется центрирующая область ... –

Не могли бы вы привести пример того, как должна выглядеть эта страница? Также я вижу бесполезное использование класса .centered внутри тегов . – MasterPoint

Разделите стек друг на друга не вертикально: ненормальное поведение?

ответ

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