在CSS中对齐三个框

Question

I need to align the three boxes in a horizontal position. Also I need to add toggle color of the border of the second box. I am pasting my codes here. My HTML code is

Unordered List

This is a simple list

First Item (bold)
• Second Item
• Third Item
Last Item (underlined)

            <div class="box2">
                <h2>Button Jquery Demo</h2>
                <p>The background of this box should be set to white on document.ready()</p>
                <p>Clicking the button below will alternate the color of the border of this box to red and back to default on on each click.</p>
                <a href="javascript:void(0);" onclick="alternateColor();">Toggle Color</a>
            </div>
            <div class="box3">
                <h2>Table Example</h2>
                <p>Table rows should include a hover state</p>
                <table>
                  <thead>
                  <div id="col3">
                      <table summary="" border="1" cellspacing="0" cellpadding="3">


                    <tr>
                      <th>Driver</th>
                      <th>Hometown</th>
                      <th>Car</th>
                    </tr>
                  </thead>

                  <tbody>
                    <tr>
                      <td>John S.</td>
                      <td>Lincoln, NE</td>
                      <td>55</td>
                    </tr>
                    <tr>
                      <td>Jane D.</td>
                      <td>Omaha, NE</td>
                      <td>24</td>
                    </tr>
                  </tbody>

                  <tfoot>
                    <tr>
                      <td>Mike J.</td>
                      <td>Albany, NY</td>
                      <td>1</td>
                    </tr>
                  </tfoot>
                </table>
</div>

My CSS code is

.box1 {
    background-color: #4b4244;
    width: 300px;
    padding: 25px;
    margin: 25px;
    height: 240px ;
    border-radius: 25px;
    display:inline-block;

}
.box2 {
    margin: auto;
    background-color:white;
    width: 300px;
    padding: 25px;
    height: 240px;
    border-radius: 25px;
    display: inline-block;

}
.box3 {
    position: absolute;
    right: 0px;
    background-color: #4b4244;
    width: 300px;
    padding: 25px;
    margin: 25px;
    height: 240px ;
    border-radius: 25px;
    display: inline-block;

}

Answer 1

Use float:left to align your boxes:

jsFiddle

EDIT:

I suspect the floating boxes are throwing your footer off. In that case, wrap your boxes in a containing tag (eg main) and give it this :after content:

main:after{
    content:"";
    display:block;
    clear:both;
}

updated fiddle

Answer 2

try with this below code it may help you and look it into full screen

 $(document).ready(function(){ $("a.toggleColor").click(function(){ $(".box2").toggleClass("border"); }); }); 

 div.box1,.box2,.box3{ float : left; height: 240px ; width: 300px; padding: 25px; background-color: #4b4244; margin : 25px; border-radius: 25px; } .box2 { background-color:white !important; border : 1px #4b4244 solid; } .border{ border : 1px red solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="box1"> <h2>Unordered List</h2> <p>This is a simple list</p> <ul> <li>First Item (bold)</li> <li>Second Item</li> <li>Third Item</li> <li>Last Item (underlined)</li> </ul> </div> <div class="box2"> <h2>Button Jquery Demo</h2> <p>The background of this box should be set to white on document.ready()</p> <p>Clicking the button below will alternate the color of the border of this box to red and back to default on on each click.</p> <a href="javascript:void(0);" class="toggleColor">Toggle Color</a> </div> <div class="box3"> <h2>Table Example</h2> <p>Table rows should include a hover state</p> <div id="col3" > <table summary="" border="1" cellspacing="0" cellpadding="3"> <thead> <tr> <th>Driver</th> <th>Hometown</th> <th>Car</th> </tr> </thead> <tbody> <tr> <td>John S.</td> <td>Lincoln, NE</td> <td>55</td> </tr> <tr> <td>Jane D.</td> <td>Omaha, NE</td> <td>24</td> </tr> </tbody> <tfoot> <tr> <td>Mike J.</td> <td>Albany, NY</td> <td>1</td> </tr> </tfoot> </table> </div>