inline-block 2 div

26-02-2021, 20:40:32

inline block 2 adet div var. Aynı satırda olup biri ekranın en solunda diğeri en sağında nasıl olur?

<div id="container">
            <div class="sol">Sol</div>
            <div class="sag">Sağ</div>
</div>
      <style>
            #container {
                position: relative;
                width: 100%;
            }
            .sol {
                width: 100px;
                height: 100px;
                background: red;
                display: inline-block;
                
            }
            .sag {
                width: 100px;
                height: 100px;
                background: red;
                display: inline-block;
                ;
            }
        </style>

26-02-2021, 20:42:22

#2

~~KRak3n_TR~~

Üyeliği durduruldu

[COLOR=#D9DAE9][FONT=consolas]<div id="container" class="flex">[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]            <div class="sol">Sol</div>[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]            <div style="justify-content: end;"><div class="sag">Sağ</div></div[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]</div>[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]      <style>[/FONT][/COLOR]
.flex {display: flex;}
[COLOR=#D9DAE9][FONT=consolas]            #container {[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]                position: relative;[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]                width: 100%;[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]            }[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]            .sol {[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]                width: 100px;[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]                height: 100px;[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]                background: red;[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]                 [/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]            }[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]            .sag {[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]                width: 100px;[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]                height: 100px;[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]                background: red;[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]            }[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT=consolas]        </style>[/FONT][/COLOR]

26-02-2021, 20:45:01

#3

mertzafer

Merhaba alt tarafta ki şekilde yaparsanız üstte çizdiğiniz gibi olacaktır

Not: inline-block özelliğini kaldırmanız durumunda da çalışacaktır.

<div id="container">
    <div class="sol">Sol</div>
    <div class="sag">Sağ</div>
</div>
<style>
    #container {
        position: relative;
        width: 100%;
    }

    .sol {
        float: right;
        width: 110px;
        height: 110px;
        margin: 5px;
        background: red;
        display: inline-block;

    }

    .sag {
        float: left;
        width: 110px;
        height: 110px;
        margin: 5px;
        background: red;
        display: inline-block;
        ;
    }

</style>

26-02-2021, 20:45:35

#4

oguzhanx

Merhaba,

Bootstrap ile calisiyorsan, row icerisine col-md-6 seklinde iki div acarak istedigin sonuca ulasabilirsin.

26-02-2021, 21:01:01

#5

buddy

teşekkürler sol sağa gitti sağ sola gitti sayende

sol kutuya float left; sağa da float:right verdim oldu.

mertzafer adlı üyeden alıntı: mesajı görüntüle

Merhaba alt tarafta ki şekilde yaparsanız üstte çizdiğiniz gibi olacaktır

Not: inline-block özelliğini kaldırmanız durumunda da çalışacaktır.

<div id="container">
    <div class="sol">Sol</div>
    <div class="sag">Sağ</div>
</div>
<style>
    #container {
        position: relative;
        width: 100%;
    }

    .sol {
        float: right;
        width: 110px;
        height: 110px;
        margin: 5px;
        background: red;
        display: inline-block;

    }

    .sag {
        float: left;
        width: 110px;
        height: 110px;
        margin: 5px;
        background: red;
        display: inline-block;
        ;
    }

</style>

26-02-2021, 21:01:40

#6

mertzafer

buddy adlı üyeden alıntı: mesajı görüntüle

teşekkürler sol sağa gitti sağ sola gitti sayende

sol kutuya float left; sağa da float:right verdim oldu.

ona dikkat etmemiştim

27-02-2021, 04:18:29

#7

cemaltekin

<style>
#container{
position:relative;
width:100%;
display:flex;
justify-content:space-between;
}
.sol{
width:100px;
height:100px;
background:red;
display:inline-block;
}
.sag{
width:100px;
height:100px;
background:red;
display:inline-block;
}
</style>

<div id="container">
<div class="sol">sol </div>
<div class="sag">sag </div>
</div>

Bu şekilde yaparsanız kolay bir şekilde isteğiniz gerçekleşir.

27-02-2021, 07:55:46

#8

buddy

çok güzel

cemaltekin adlı üyeden alıntı: mesajı görüntüle

<style>
#container{
position:relative;
width:100%;
display:flex;
justify-content:space-between;
}
.sol{
width:100px;
height:100px;
background:red;
display:inline-block;
}
.sag{
width:100px;
height:100px;
background:red;
display:inline-block;
}
</style>

<div id="container">
<div class="sol">sol </div>
<div class="sag">sag </div>
</div>

Bu şekilde yaparsanız kolay bir şekilde isteğiniz gerçekleşir.