CSS ile iki obje nasıl yan yana getirilir?

BerkeSZ

BerkeSZ

Hectopat
Katılım
30 Ağustos 2019
Mesajlar
48
Bu iki kutuyu yan yana getirmek istiyorum. Nasıl yaparım 3 kutu üstte 3 kutu altta olacak şekilde?

CSS: 
.container{
 display: flex;
 flex-wrap: wrap;
}

.container h2{
 margin-left: 350px;
}

/*! HABER KUTU */

.haber-box {
 width: 400px;
 margin: 20px;
 padding: 10px;
 border: 2px solid #ddd;
 border-radius: 8px;
 text-align: center;
 margin-left: 350px;
 display: inline-block;
}

/*! HABER KUTU RESİM */
.haber-box img {
 width: 100%;
 height: auto;
 border-radius: 10px;
}

/*! HABER KUTU BAŞLIĞI */
.baslik {
 font-size: 20px;
 margin-top: 10px;
}

/*! HABER KUTU ACIKLAMA */
.aciklama {
 margin-top: 5px;
 color: #555;
}

HTML: 
<div class="container">
 <h2>Haberler</h2>

 <div class="haber-box">
 <a href="#"><img src="img/sametakaydınhaber.jpg" alt="Samet Akaydın"></a>
 <div class="baslik">Samet Akaydın Fatih Terimin Yanına gidiyor</div>
 <div class="aciklama">Fatih Terim'in çalıştırdığı Panathinaikos, Fenerbahçe'nin milli stoperi.
 Samet Akaydin'i kadrosuna katıyor. Taraflar arasında anlaşma sağlandı, Samet'in kısa süre.
 içerisinde Atina'ya gitmesi bekleniyor. <a href="#">Devamı...</a> </div>
 </div>
 <div class="haber-box">
 <a href="#"><img src="img/sametakaydınhaber.jpg" alt="Samet Akaydın"></a>
 <div class="baslik">Samet Akaydın Fatih Terimin Yanına gidiyor</div>
 <div class="aciklama">Fatih Terim'in çalıştırdığı Panathinaikos, Fenerbahçe'nin milli stoperi.
 Samet Akaydin'i kadrosuna katıyor. Taraflar arasında anlaşma sağlandı, Samet'in kısa süre.
 içerisinde Atina'ya gitmesi bekleniyor. <a href="#">Devamı...</a> </div>
 </div>
 </div>
 
Son düzenleyen: Moderatör:
BerkeSZ dedi:
Bu iki kutuyu yan yana getirmek istiyorum. Nasıl yaparım 3 kutu üstte 3 kutu altta olacak şekilde?

CSS: 
.container{
 display: flex;
 flex-wrap: wrap;
}

.container h2{
 margin-left: 350px;
}

/*! HABER KUTU */

.haber-box {
 width: 400px;
 margin: 20px;
 padding: 10px;
 border: 2px solid #ddd;
 border-radius: 8px;
 text-align: center;
 margin-left: 350px;
 display: inline-block;
}

/*! HABER KUTU RESİM */
.haber-box img {
 width: 100%;
 height: auto;
 border-radius: 10px;
}

/*! HABER KUTU BAŞLIĞI */
.baslik {
 font-size: 20px;
 margin-top: 10px;
}

/*! HABER KUTU ACIKLAMA */
.aciklama {
 margin-top: 5px;
 color: #555;
}

HTML: 
<div class="container">
 <h2>Haberler</h2>

 <div class="haber-box">
 <a href="#"><img src="img/sametakaydınhaber.jpg" alt="Samet Akaydın"></a>
 <div class="baslik">Samet Akaydın Fatih Terimin Yanına gidiyor</div>
 <div class="aciklama">Fatih Terim'in çalıştırdığı Panathinaikos, Fenerbahçe'nin milli stoperi.
 Samet Akaydin'i kadrosuna katıyor. Taraflar arasında anlaşma sağlandı, Samet'in kısa süre.
 içerisinde Atina'ya gitmesi bekleniyor. <a href="#">Devamı...</a> </div>
 </div>
 <div class="haber-box">
 <a href="#"><img src="img/sametakaydınhaber.jpg" alt="Samet Akaydın"></a>
 <div class="baslik">Samet Akaydın Fatih Terimin Yanına gidiyor</div>
 <div class="aciklama">Fatih Terim'in çalıştırdığı Panathinaikos, Fenerbahçe'nin milli stoperi.
 Samet Akaydin'i kadrosuna katıyor. Taraflar arasında anlaşma sağlandı, Samet'in kısa süre.
 içerisinde Atina'ya gitmesi bekleniyor. <a href="#">Devamı...</a> </div>
 </div>
 </div>
Genişletmek için tıkla...

istediğin şey tam olarak bu mu

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
h2 {
text-align: center;
}
/*! HABER KUTU */
.haber-box {
width: 400px;
margin: 20px;
padding: 10px;
border: 2px solid #ddd;
border-radius: 8px;
text-align: center;
margin-left: 50px;
display: inline-block;
}
/*! HABER KUTU RESİM */
.haber-box img {
width: 100%;
height: auto;
border-radius: 10px;
}
/*! HABER KUTU BAŞLIĞI */
.baslik {
font-size: 20px;
margin-top: 10px;
}
/*! HABER KUTU ACIKLAMA */
.aciklama {
margin-top: 5px;
color: #555;
}
/* İki ayrı sıra için stil tanımlamaları */
.ust-sira {
margin-bottom: 20px; /* Üstteki sıradaki kutular arasında boşluk bırak */
}
</style>
</head>
<body>
<h2>Haberler - Üst Sıra</h2>
<div class="container ust-sira">
<div class="haber-box">
<a href="#"><img src="img/8.jpg" alt="Samet Akaydın" /></a>
<div class="baslik">Samet Akaydın Fatih Terimin Yanına gidiyor</div>
<div class="aciklama">
Fatih Terim'in çalıştırdığı Panathinaikos, Fenerbahçe'nin milli
stoperi. Samet Akaydin'i kadrosuna katıyor. Taraflar arasında anlaşma
sağlandı, Samet'in kısa süre. içerisinde Atina'ya gitmesi bekleniyor.
<a href="#">Devamı...</a>
</div>
</div>
<div class="haber-box">
<a href="#"><img src="img/8.jpg" alt="Samet Akaydın" /></a>
<div class="baslik">Samet Akaydın Fatih Terimin Yanına gidiyor</div>
<div class="aciklama">
Fatih Terim'in çalıştırdığı Panathinaikos, Fenerbahçe'nin milli
stoperi. Samet Akaydin'i kadrosuna katıyor. Taraflar arasında anlaşma
sağlandı, Samet'in kısa süre. içerisinde Atina'ya gitmesi bekleniyor.
<a href="#">Devamı...</a>
</div>
</div>
<div class="haber-box">
<a href="#"><img src="img/8.jpg" alt="Samet Akaydın" /></a>
<div class="baslik">Samet Akaydın Fatih Terimin Yanına gidiyor</div>
<div class="aciklama">
Fatih Terim'in çalıştırdığı Panathinaikos, Fenerbahçe'nin milli
stoperi. Samet Akaydin'i kadrosuna katıyor. Taraflar arasında anlaşma
sağlandı, Samet'in kısa süre. içerisinde Atina'ya gitmesi bekleniyor.
<a href="#">Devamı...</a>
</div>
</div>
<div class="haber-box">
<a href="#"><img src="img/8.jpg" alt="Samet Akaydın" /></a>
<div class="baslik">Samet Akaydın Fatih Terimin Yanına gidiyor</div>
<div class="aciklama">
Fatih Terim'in çalıştırdığı Panathinaikos, Fenerbahçe'nin milli
stoperi. Samet Akaydin'i kadrosuna katıyor. Taraflar arasında anlaşma
sağlandı, Samet'in kısa süre. içerisinde Atina'ya gitmesi bekleniyor.
<a href="#">Devamı...</a>
</div>
</div>
</div>
</body>
</html>
 
Son düzenleme:
CSS: 
.container{
 flex-wrap: wrap;
}
.haber-boxes{
    display: flex;
}
.container h2{
 margin-left: 350px;
}

/*! HABER KUTU */

.haber-box {
 width: 400px;
 margin: 20px;
 padding: 10px;
 border: 2px solid #ddd;
 border-radius: 8px;
 text-align: center;
 margin-left: 350px;
 display: inline-block;
}

/*! HABER KUTU RESİM */
.haber-box img {
 width: 100%;
 height: auto;
 border-radius: 10px;
}

/*! HABER KUTU BAŞLIĞI */
.baslik {
 font-size: 20px;
 margin-top: 10px;
}

/*! HABER KUTU ACIKLAMA */
.aciklama {
 margin-top: 5px;
 color: #555;
}
HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>Haberler</h2>
       <div class="haber-boxes">
        <div class="haber-box">
        <a href="#"><img src="img/sametakaydınhaber.jpg" alt="Samet Akaydın"></a>
        <div class="baslik">Samet Akaydın Fatih Terimin Yanına gidiyor</div>
        <div class="aciklama">Fatih Terim'in çalıştırdığı Panathinaikos, Fenerbahçe'nin milli stoperi.
        Samet Akaydin'i kadrosuna katıyor. Taraflar arasında anlaşma sağlandı, Samet'in kısa süre.
        içerisinde Atina'ya gitmesi bekleniyor. <a href="#">Devamı...</a> </div>
        </div>
        <div class="haber-box">
        <a href="#"><img src="img/sametakaydınhaber.jpg" alt="Samet Akaydın"></a>
        <div class="baslik">Samet Akaydın Fatih Terimin Yanına gidiyor</div>
        <div class="aciklama">Fatih Terim'in çalıştırdığı Panathinaikos, Fenerbahçe'nin milli stoperi.
        Samet Akaydin'i kadrosuna katıyor. Taraflar arasında anlaşma sağlandı, Samet'in kısa süre.
        içerisinde Atina'ya gitmesi bekleniyor. <a href="#">Devamı...</a> </div>
        </div>
        </div>
    </div>
</body>
</html>
 

Benzer konular

I
  • Çözüldü
Çözüldü  HTML/CSS - kutular yan yana koyulmuyor
2
Mesaj
11
Görüntüleme
5B
Berkay Davas
Berkay Davas
burakucar123
CSS İki Div'i Yan Yana Ortalayarak Sıralama
Mesaj
6
Görüntüleme
8B
burakucar123
burakucar123
AteşliKazanova99
CSS ile nasıl kutu koyulur?
Mesaj
5
Görüntüleme
378
Yuuns
Yuuns
EC28
CSS veya HTML ile üst bilgi kısmı nasıl kaldırılır?
Mesaj
5
Görüntüleme
597
Hd6850
Hd6850
Primearc
  • Çözüldü
Çözüldü  CSS kutucuklar alt alta nasıl getirilir?
Mesaj
4
Görüntüleme
2B
Primearc
Primearc

Yeni konular

Yeni mesajlar

Geri
Yukarı