Бірнеше мәтіндік блоктармен проблемалар

Міне, мәтіндік жәшіктерге арналған htmlім бар. Оларды «inline»

<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 жауаптар

1 блокқа float: left; қосуға болады және барлық 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 деп аталатын сынып құрыңыз және оны ids бар барлық divs үшін қолданыңыз. Бұл сынып үшін төлсипат float: left; болуы керек. Міне бітті.

Бұл көмектеседі деп үміттенемін.

0
қосылды

Сіз іздеген бұл ма?

ЖҰМЫС ІСТЕУ

Код:

.kutija{float:left;}

Егер иә, мұнда логика.

Логика:

Мысалы, .kutija деп аталатын сынып құрыңыз және оны ids бар барлық divs үшін қолданыңыз. Бұл сынып үшін төлсипат float: left; болуы керек. Міне бітті.

Бұл көмектеседі деп үміттенемін.

0
қосылды

Сіз іздеген бұл ма?

ЖҰМЫС ІСТЕУ

Код:

.kutija{float:left;}

Егер иә, мұнда логика.

Логика:

Мысалы, .kutija деп аталатын сынып құрыңыз және оны ids бар барлық divs үшін қолданыңыз. Бұл сынып үшін төлсипат 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%, онда төрт тең баған болуы керек. Тіпті <div>: 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%, онда төрт тең баған болуы керек. Тіпті <div>: 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
қосылды