与多个文本块

问题在这里是我的文本框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”.. 我的问题是，我只想在一行中显示这四个框。所以，我可以把那里的新闻，接触的东西，一天的行情等等

来源

2013-06-24 user2308737

可我一定试试这个：

#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-24 10:07:06 falguni

这部分解决了我的问题.. 这里现在事情是这样的，它没有表现出任何的间隔，这些盒子之间：S – user2308737

现在试试这个＃kutija_2＆@ kutija_3 {保证金：0 2px的;） – falguni

只需添加

display:inline-block;

到Blocks - JSFiddle Demo

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

另一件事，<center>标记已被弃用，所以不要使用它，如果你想在CSS的文本中使用text-align:center。

来源

2013-06-24 10:08:57

同时，由于边框宽度 - 框宽度不能25％，或第四个盒子我被移下来... http://jsfiddle.net/PCbP8/和一些保证金应该被添加... – sinisake

@nevermind 非常感谢您的回答！帮助了我很多！：d – user2308737

您可以添加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-24 10:10:55

尝试浮动股利向左

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

来源

2013-06-24 10:13:20 Pbk1303

删除你的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-24 10:18:19

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

来源

2013-06-24 10:18:56

是这是你在找什么？

WORKING DEMO

验证码：

.kutija{float:left;}

如果是的话，这里的逻辑。

逻辑：

你只是需要创建一个名为例如.kutija类，并应用它所有已ids已经分配的divs。这个类的属性应该有float:left;。而已。

希望这会有所帮助。

来源

2013-06-24 10:20:47 Nitesh

首先总宽度是100％，其中你想有四个相等的列。即使您使用float:left或display:inline-block;这不会全部4个格对齐在一起。所以你已经给出了25％的宽度+边框，这将超过100％+边框宽度。所以会出现3列，一个将出现在底部。

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

我只是改变了代码位U可以检查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-24 10:21:24 LegendaryAks

与多个文本块

回答

相关问题