Question

我目前拥有这3个div标签，并尝试将它们调整为100％宽度。但我似乎无法通过第一个div得到第二个和第三个div。我不确定第一个div的问题是什么。

目前正在学习CSS如何与HTML交互，我们非常感谢任何解释。

代码（http://jsfiddle.net/Jenz/hs6ptm1t）：

.widget_opening_hours{
  display:inline-block;
}
.widget_address{
  display:inline-block;
}
.widget_nav_menu{
  display: inline-block;
}

<div class="widget_opening_hours">
  <h3 class="hours-title">Business Hours:</h3>
  <div class="day">	
    <span class="left"> Sunday: </span>
    <span class="right">CLOSED </span>
  </div>
  <div class= "day">
    <span class="left"> Monday: </span>
    <span class="right>"> CLOSED </span>
  </div>
  <div class="day">
    <span class="left"> Tuesday: </span>
    <span class="right"> 8am-5pm </span>
  </div>
  <div class="day"> 
    <span class="left"> Wednesday: </span>
    <span class="right"> 8am-5pm </span>
  </div>
  <div class="day">
    <span class="left"> Thursday:</span>
    <span class="right"> 8am-5pm </span>
  </div>	
  <div class="day">
    <span class="left"> Friday: </span>
    <span class="right"> 8am-5pm </span>
  </div>
  <div class="day">
    <span class="left"> Saturday: </span>
    <span class="right"> 8am-5pm </span>
  </div>
</div> 
<div class="widget_address">
  <h3 class="address-title">Address:</h3>
  <div class="address"><p>25 Mulberry Lane,<br>Rainy Grove,
    <br>Cranberry State,<br>United States of JGE23</p></div>
</div>
<div class="widget_nav_menu">
  <a href="#home"> Home </a><br>
  <a href="#cakesicings">Cakes & Icings</a><br>
  <a href="#scakes">Specialty Cakes</a><br>
  <a href="#ccakes">Cupcakes</a><br>
  <a href="#cookies">Cookies</a><br>
  <a href="#aboutus">About Us</a>
</div>

Answer 1

.widget_opening_hours{
width: 33.33%;
float:left;
}

.widget_address{
    text-align: center;
width: 33.33%;
float:left;
}

.widget_nav_menu{
    text-align: center;
width: 33.33%;float:left;
}

Answer 2

如果要创建某种网格，请执行以下操作。

将font-size: 0;添加到您的父元素，然后将width:33.33%;添加到您的“列”。

在这个例子中，我创建了一个我添加到三个内容容器中的col-3类。

body {
  font-size: 0;
}

.widget_opening_hours{
display:inline-block;
 }

.widget_address{
display:inline-block;
text-align: center;
 }

.widget_nav_menu{
display: inline-block;
text-align: center;
}

.col-3 {
  width: 33.33%;
  font-size: initial;
}

 <div class=" col-3 widget_opening_hours">
        <h3 class="hours-title">Business Hours:</h3>
            <div class="day">   
                <span class="left"> Sunday: </span>
                    <span class="right">CLOSED </span>
            </div>
            <div class= "day">
                <span class="left"> Monday: </span>
                    <span class="right>"> CLOSED </span>
            </div>
            <div class="day">
                <span class="left"> Tuesday: </span>
                     <span class="right"> 8am-5pm </span>
            </div>
            <div class="day"> 
                <span class="left"> Wednesday: </span>
                    <span class="right"> 8am-5pm </span>
            </div>
            <div class="day">
                <span class="left"> Thursday:</span>
                    <span class="right"> 8am-5pm </span>
            </div>  
            <div class="day">
                <span class="left"> Friday: </span>
                    <span class="right"> 8am-5pm </span>
            </div>
            <div class="day">
                <span class="left"> Saturday: </span>
                    <span class="right"> 8am-5pm </span>
            </div>
    </div> 

<div class="col-3 widget_address">
  <h3 class="address-title">Address:</h3>
<div class="address"><p>25 Mulberry Lane,<br>Rainy Grove,
 <br>Cranberry State,<br>United States of JGE23</p></div>
</div>

<div class="col-3 widget_nav_menu">
    <a href="#home"> Home </a><br>
    <a href="#cakesicings">Cakes & Icings</a><br>
    <a href="#scakes">Specialty Cakes</a><br>
    <a href="#ccakes">Cupcakes</a><br>
    <a href="#cookies">Cookies</a><br>
    <a href="#aboutus">About Us</a></div>

Answer 3

在调用其余的内联div之前，你正在关闭你的页脚。在代码段末尾移动结束div会为您完成工作。同时检查here。

<div class="footer area_right"> 
        <div class="widget_opening_hours">
            <h3 class="hours-title">Business Hours:</h3>

                <div class="day">   
                    <span class="left"> Sunday: </span>
                        <span class="right">CLOSED </span>
                </div>
                <div class= "day">
                    <span class="left"> Monday: </span>
                        <span class="right>"> CLOSED </span>
                </div>
                <div class="day">
                    <span class="left"> Tuesday: </span>
                         <span class="right"> 8am-5pm </span>
                </div>
                <div class="day"> 
                    <span class="left"> Wednesday: </span>
                        <span class="right"> 8am-5pm </span>
                </div>
                <div class="day">
                    <span class="left"> Thursday:</span>
                        <span class="right"> 8am-5pm </span>
                </div>  
                <div class="day">
                    <span class="left"> Friday: </span>
                        <span class="right"> 8am-5pm </span>
                </div>
                <div class="day">
                    <span class="left"> Saturday: </span>
                        <span class="right"> 8am-5pm </span>
                </div>

        </div> 


        <div class="widget_address">
            <h3 class="address-title">Address:</h3>
            <div class="address"><p>25 Mulberry Lane,<br>Rainy Grove,<br>Cranberry State,<br>United States of JGE23
            </p></div>
        </div>                                  

        <div class="widget_nav_menu">
                <a href="#home"> Home </a>
                    <br>
                <a href="#cakesicings">Cakes & Icings</a> 
                    <br>
                <a href="#scakes">Specialty Cakes</a> 
                    <br>
                <a href="#ccakes">Cupcakes</a> 
                    <br>
                <a href="#cookies">Cookies</a> 
                    <br>
                <a href="#aboutus">About Us</a>
        </div>
    </div>

如何横向使用带有3个div标签的内联块

3 个答案: