Штабелирование divs по вертикали

Я программирую игру tic-tac-toe и не могу укладывать свои игровые плитки вертикально в 3x3.Штабелирование divs по вертикали

Как бы то ни было, они представляют собой 9 горизонтальных коробок в ряд, но когда я использую {clear: left;}, он просто превращает их в 9 вертикальных боксов.

Вот мой код до сих пор:

<style type="text/css"> 
#div1 { 
    width: 80px; 
    height: 80px; 
    padding: 10px; 
    border: 1px solid #aaaaaa; 
    float:left; 

} 
#div2 { 
    width: 80px; 
    height: 80px; 
    padding: 10px; 
    border: 1px solid #aaaaaa; 
    float:left; 
} 
#div3 { 
    width: 80px; 
    height: 80px; 
    padding: 10px; 
    border: 1px solid #aaaaaa; 
    float:left; 
} 
<body> 
    <p>Drag the X and O images into the tic-tac-toe board:</p> 
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
</body>

источник

2013-11-07 user2923395

Рассмотрите возможность использования 'display: table',' display: table-row' и 'display: table-cell', так как кажется, что вы в основном хотите создать сетку. – Nightfirecat

http://jsfiddle.net/justjavac/9s8CX/

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

CSS

#div1 { 
    width: 80px; 
    height: 80px; 
    padding: 10px; 
    border: 1px solid #aaaaaa; 
    float:left; 
    clear: left; 
} 
#div2 { 
    width: 80px; 
    height: 80px; 
    padding: 10px; 
    border: 1px solid #aaaaaa; 
    float:left; // <---- HERE 
} 
#div3 { 
    width: 80px; 
    height: 80px; 
    padding: 10px; 
    border: 1px solid #aaaaaa; 
    float:left; 
}

источник

2013-11-07 04:32:21 justjavac

Почему бы не просто создать parent элемент, такой как #parent, и установить определенную ширину на нем? При этом вам не нужно менять положение элементов в DOM.

jsFiddle example

#parent { 
    width: 306px; 
    margin: 0px auto; 
}

В качестве альтернативы, вы можете также создать row элементы, как родители каждого из 3-х дочерних элементов, и установите display:block. При этом, вы могли бы установить явную ширину на родителях .. хорошо работает для динамического контента, или адаптивного дизайна ..

На случайную ноте, я думал, что это было бы здорово, чтобы добавить что-то вроде :

#parent:hover > div:not(:hover){ 
    background:black; 
}

в основном, это устанавливает background-color из дочерних элементов к черному при наведении курсора на родителя. Тем не менее, при зависании над ребенком, это специально не применяется .. попробуйте нависать над плитами.

jsFiddle example

источник

2013-11-07 04:28:04

Вот еще одно решение, используя display: inline-block; и некоторые бр теги:

http://jsfiddle.net/jWe9K/

источник

2013-11-07 04:29:38 Woodchipper

Прежде всего, убедитесь, что вы закрыли свой тег style.

Вам не нужно повторять ваши стили для каждой строки (так как это точно то же самое для div1, div2 и div3), вместо того, чтобы изменить ID к class, потому что идентификаторы предназначены для одного элемента.

Для создания строк вам нужно разместить 3 DIV, которые вы хотите в строке внутри другого DIV с атрибутом position:relative.

CSS:

.mydiv { 
    wclassth: 80px; 
    height: 80px; 
    padding: 10px; 
    border: 1px solclass #aaaaaa; 
    float:left; 
} 

.myrow { 
    position:relative; 
}

HTML:

<div class="myrow"> 
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
</div> 
<div class="myrow"> 
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
</div> 
<div class="myrow"> 
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
</div>

http://jsfiddle.net/J2Qjb/

Пожалуйста, обратите внимание, что я добавил цвет фона в классе mydiv на JSFiddle так, чтобы она была видна.

источник

2013-11-07 04:41:55 block14

Штабелирование divs по вертикали

ответ

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