Проблеми з декількома текстовими блоками

Ось мій HTML для текстових полів .. Я хочу показати їх "вбудованим"

<div id="kutija_1">
   

Text1

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
</div> <div id="kutija_2">

Text2

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
</div> <div id="kutija_3">

Text3

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
</div> <div id="kutija_4">

Text4

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf

Here is my CSS code:

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

Probably I don't need this "kutija_2, kutija_3,kutija_4".. My problem is that I only want to show these four boxes in one line. So i can put there news, contact stuff, quotes of the day etc...

0

13 Відповіді

Ви можете додати float: left; до 1 блоку і дати всім divs того самого класу, щоб вони відображалися вбудованим.

JSFIDDLE

HTML:

<div class="kutija_1">
   

Text1

<div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
</div> <div class="kutija_1">

Text2

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
</div> <div class="kutija_1">

Text3

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
</div> <div class="kutija_1">

Text4

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf

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

Also note that i added .kutija_1 h2{ text-align: center;) do not use

this option is deprecated.
1
додано

Просто додати

display:inline-block;

To the blocks - JSFiddle Demo

Also, why do you need to use IDs if you're applying the exact same styling to each item. You could Просто додатиa class of box for example, and then you don't need to duplicate all those rules.

Another thing, the

tag is deprecated, so don't use that, if you want to center text use text-align:center in the CSS.
1
додано
Також через ширину кордону ширина коробки не може бути 25%, або четверта коробка буде перенесена вниз ... jsfiddle .net/PCbP8 та деяку маржу слід додати ...
додано Автор sinisake, джерело
@nevermind Велике спасибі за вашу відповідь! Я багато допоміг! : D
додано Автор user2308737, джерело

Це те, що ви шукаєте?

РОБОЧИЙ ДЕМО

Код:

.kutija{float:left;}

Якщо так, то тут логіка.

Логіка:

Вам потрібно просто створити клас з назвою, наприклад, .kutija і застосувати його для всіх divs , які вже мають призначені ids . Атрибут для цього класу повинен мати float: left; . Це воно.

Сподіваюся, це допоможе.

0
додано

Це те, що ви шукаєте?

РОБОЧИЙ ДЕМО

Код:

.kutija{float:left;}

Якщо так, то тут логіка.

Логіка:

Вам потрібно просто створити клас з назвою, наприклад, .kutija і застосувати його для всіх divs , які вже мають призначені ids . Атрибут для цього класу повинен мати float: left; . Це воно.

Сподіваюся, це допоможе.

0
додано

Це те, що ви шукаєте?

РОБОЧИЙ ДЕМО

Код:

.kutija{float:left;}

Якщо так, то тут логіка.

Логіка:

Вам потрібно просто створити клас з назвою, наприклад, .kutija і застосувати його для всіх divs , які вже мають призначені ids . Атрибут для цього класу повинен мати float: left; . Це воно.

Сподіваюся, це допоможе.

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;
    }
0
додано
тепер спробуйте це # kutija_2 & @ kutija_3 (margin: 0 2px;)
додано Автор Falguni Panchal, джерело
Це частково вирішило мою проблему .. Ось зараз, це не відображає інтервалів між цими коробками: S
додано Автор user2308737, джерело
#kutija_1 , #kutija_2 ,#kutija_3 , #kutija_4{
    display:inline-block;
width:23%;}
0
додано
#kutija_1 , #kutija_2 ,#kutija_3 , #kutija_4{
    display:inline-block;
width:23%;}
0
додано

Спробуйте перемістити div наліво

         #kutija_1, #kutija_2, #kutija_3, #kutija_4{float:left;}
0
додано

Спочатку загальна ширина 100%, в якій ви хочете мати чотири рівні стовпці. Навіть якщо ви використовуєте float: left або display: inline-block; , який не буде вирівняти всі 4 divs разом. так що ви дали 25% ширини + межі, яка буде більше ніж 100% + ширина кордону. тому з'явиться 3 стовпці, а внизу - один.

За допомогою цього ви не зможете вирівняти всі чотири розділи разом. Тож, що я хотів би запропонувати, ви можете зробити щось подібне

Я трохи змінив код трохи, можна перевірити html

<div class="common">
   <div id="kutija_1"> 
   

Text1

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
</div> </div> <div class="common"> <div id="kutija_2">

Text1

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
</div> </div> <div class="common"> <div id="kutija_3">

Text1

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
</div> </div> <div class="common"> <div id="kutija_4">

Text1

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
</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;
}
0
додано

Спочатку загальна ширина 100%, в якій ви хочете мати чотири рівні стовпці. Навіть якщо ви використовуєте float: left або display: inline-block; , який не буде вирівняти всі 4 divs разом. так що ви дали 25% ширини + межі, яка буде більше ніж 100% + ширина кордону. тому з'явиться 3 стовпці, а внизу - один.

За допомогою цього ви не зможете вирівняти всі чотири розділи разом. Тож, що я хотів би запропонувати, ви можете зробити щось подібне

Я трохи змінив код трохи, можна перевірити html

<div class="common">
   <div id="kutija_1"> 
   

Text1

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
</div> </div> <div class="common"> <div id="kutija_2">

Text1

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
</div> </div> <div class="common"> <div id="kutija_3">

Text1

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
</div> </div> <div class="common"> <div id="kutija_4">

Text1

    <div class="stripeContainer"></div>


asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
asdfasdfasdffdaasdf
</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;
}
0
додано

Видаліть свої ідентифікатори та додайте цей клас у всі ваші поля, він повинен зробити трюк

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

0
додано

Видаліть свої ідентифікатори та додайте цей клас у всі ваші поля, він повинен зробити трюк

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

0
додано