在css中对齐三个框

Question

我需要将三个盒子对齐在水平位置。另外我需要添加第二个框边框的切换颜色。我在这里粘贴我的代码。 我的HTML代码是

                    

无序列表

                    

这是一个简单的清单

                    

                        第一项（粗体）                         
• 第二项
                        
• 第三项
                        最后一项（带下划线）                     

                

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

我的CSS代码是

.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

使用float:left对齐您的框：

jsFiddle

修改

我怀疑浮动的盒子会把你的页脚丢掉。在这种情况下，将您的框包装在一个包含标签（例如main）中，并将其:after内容提供给它：

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

updated fiddle

Answer 2

尝试使用以下代码，它可以帮助您并将其全屏显示

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;