Geek Answers Handbook

Partitioning vertically

I am programming a tic-tac-toe game and cannot stack my game tiles vertically in 3x3.

Be that as it may, they are 9 horizontal rectangles in a row, but when I use {clear: left;}, it just turns them into 9 vertical blocks.

Here is my code:

<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>
+4
source share
4 answers

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;
}
+6
source

Why not just create an element parent, for example #parent, and set a certain width on it? In this case, you do not need to change the position of elements in the DOM.

JsFiddle example

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

row, , display:block. . .

, - :

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

, background-color . , .. .

jsFiddle

+3

, 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/

Note that I added the background color to the mydiv class on the JSFiddle so that it is visible.

+1
source

Here's another solution using display: inline-block;some br tags too:

http://jsfiddle.net/jWe9K/

0
source

More articles:


All Articles