0

这是我的文本框 html.. 我想“内联”显示它们

<div id="kutija_1">
   <center><h2> Text1</h2></center>
    <div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
    <div id="kutija_2">
   <center><h2> Text2</h2></center>
    <div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
    <div id="kutija_3">
   <center><h2> Text3</h2></center>
    <div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
    <div id="kutija_4">
   <center><h2> Text4</h2></center>
    <div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>

这是我的CSS代码： 

#kutija_1 {
position:relative; 
width:25%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
}
#kutija_2 {
position:relative; 
width:25%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:hidden;
border:3px black double;
border-radius:14px;
}
#kutija_3 {
position:relative; 
width:25%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
}
#kutija_4 {
position:relative; 
width:25%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
}

可能我不需要这个“kutija_2，kutija_3，kutija_4”..我的问题是我只想在一行中显示这四个框。所以我可以在那里放新闻，联系方式，当天的报价等......

4

8 回答 8

1

您可以添加float: left;到 1 个块并为所有 div 赋予相同的类，因此它们显示为内联。

JSFIDDLE

HTML：

<div class="kutija_1">
   <h2> Text1</h2>
<div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
<div class="kutija_1">
   <center><h2> Text2</h2></center>
    <div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
<div class="kutija_1">
   <center><h2> Text3</h2></center>
    <div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
<div class="kutija_1">
   <center><h2> Text4</h2></center>
    <div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>

CSS：

.kutija_1 {
position:relative; 
    float: left;
width:25%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
}

.kutija_1 h2{
    text-align: center;
}

另请注意，我添加了.kutija_1 h2{ text-align: center;)不使用<center>此选项已弃用。

于 2013-06-24T10:10:55.930 回答
1

只需添加

display:inline-block;

到块 - JSFiddle 演示

IDs此外，如果您对每个项目应用完全相同的样式，为什么需要使用。例如，您可以只添加一个类box，然后您就不需要复制所有这些规则。

另一件事，<center>标签已被弃用，所以不要使用它，如果你想text-align:center在CSS.

于 2013-06-24T10:08:57.957 回答
0

删除您的 ID 并将此类添加到您的所有框中，它应该可以解决问题

.text-box {
    position:relative;
    width:24%;
    margin-right:1%;
    margin-top:5px;
    height:auto;
    background-color:#fff;
    overflow:auto;
    border:3px black double;
    border-radius:14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display:inline-block;
}

http://jsfiddle.net/8Vvh9/

于 2013-06-24T10:18:19.683 回答
0 
#kutija_1 , #kutija_2 ,#kutija_3 , #kutija_4{
    display:inline-block;
width:23%;}
于 2013-06-24T10:18:56.477 回答
0

尝试将 div 向左浮动

         #kutija_1, #kutija_2, #kutija_3, #kutija_4{float:left;}
于 2013-06-24T10:13:20.503 回答
0

这是你想要的？

工作演示

编码：

.kutija{float:left;}

如果是，这就是逻辑。

逻辑：

您只需要创建一个名为 instance 的类，.kutija并将其应用于所有divs已ids分配的类。这个类的属性应该有float:left;。而已。

希望这可以帮助。

于 2013-06-24T10:20:47.750 回答
0

首先，总宽度为 100%，您希望在其中有四个相等的列。即使您使用float:leftor 也不display:inline-block;会将所有 4 个 div 对齐在一起。所以你给了 25% 宽度 + 边框，这将超过 100% + 边框宽度。所以会出现3列，底部会出现一列。

有了这个，你将无法将所有四个 div 对齐在一起。所以我建议你可以做这样的事情

我只是稍微更改了代码，你可以检查 html

<div class="common">
   <div id="kutija_1"> 
   <center><h2> Text1</h2></center>
    <div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
       </div>  
</div>
    <div class="common">
   <div id="kutija_2"> 
   <center><h2> Text1</h2></center>
    <div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
       </div>  
</div>
    <div class="common">
   <div id="kutija_3"> 
   <center><h2> Text1</h2></center>
    <div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
       </div>  
</div>
    <div class="common">
   <div id="kutija_4"> 
   <center><h2> Text1</h2></center>
    <div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
       </div>  
</div>

CSS会是这样的

.common{display:inline-block; width:25%; float:left;}
#kutija_1 {
position:relative; 
width:90%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;

}
#kutija_2 {
position:relative; 
width:90%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:hidden;
border:3px black double;
border-radius:14px;

}
#kutija_3 {
position:relative; 
width:90%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;

}
#kutija_4 {
position:relative; 
width:90%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
}
于 2013-06-24T10:21:24.570 回答
0

我可以试试这个：

  #kutija_1 {
    position:relative; 
    width:25%;
    margin-top:5px;
    height:auto;
    background-color:#fff;
    overflow:auto;
    border:3px black double;
    border-radius:14px;
    float:left;
    }
    #kutija_2 {
    position:relative; 
    width:25%;
    margin-top:5px;
    height:auto;
    background-color:#fff;
    overflow:hidden;
    border:3px black double;
    border-radius:14px;
    float:left;
    margin:0 2px;
    }
    #kutija_3 {
    position:relative; 
    width:25%;
    margin-top:5px;
    height:auto;
    background-color:#fff;
    overflow:auto;
    border:3px black double;
    border-radius:14px;
    float:left;
    margin:0 2px;
    }
    #kutija_4 {
    position:relative; 
    width:25%;
    margin-top:5px;
    height:auto;
    background-color:#fff;
    overflow:auto;
    border:3px black double;
    border-radius:14px;
    float:left;
    }
于 2013-06-24T10:07:06.707 回答