多个文本块的问题

时间：2013-06-24 10:03:54

标签： html css

这是我的文本框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”.. 我的问题是我只想在一行中显示这四个框。所以我可以把新闻，联系人的东西，当天的报价等等......

8 个答案:

答案 0 :(得分：1)

添加

display:inline-block;

到街区 - JSFiddle Demo

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

另一方面，<center>代码已弃用，因此如果您想在text-align:center CSS中使用{{1}}，请不要使用该代码。

答案 1 :(得分：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>此选项已弃用。

答案 2 :(得分：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;
    }

答案 3 :(得分：0)

尝试将div浮动到左侧

         #kutija_1, #kutija_2, #kutija_3, #kutija_4{float:left;}

答案 4 :(得分：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/

答案 5 :(得分：0)

#kutija_1 , #kutija_2 ,#kutija_3 , #kutija_4{
    display:inline-block;
width:23%;}

答案 6 :(得分：0)

这是你在找什么？

WORKING DEMO

守则： 

.kutija{float:left;}

如果是，这是逻辑。

逻辑：

您只需要创建一个名为for .kutija的类，并将其应用于已经分配了divs的所有ids。此类的属性应为float:left;。多数民众赞成。

希望这有帮助。

答案 7 :(得分：0)

首先所有总宽度为100％，其中你想要有四个相等的列。即使您使用float:left或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;
}
相关问题
最新问题