Hocam, css'de alanlarınızı "%" yüzdelik dilimlerle bölebilirsiniz sonrada float:left; etiketi ile yan yana koyabilirsiniz, resim alanı için bir sınıf belirleyerek, örneğin;
<div class="kutu1"><h1>A</h1></div>
<div class="kutu2"><h1>A</h1></div>
<div class="kutu3"><h1>A</h1></div>
.kutu1{
width:30%;
height: auto;
background-color:gray;
float: left;
}
.kutu2{
width:50%;
height: auto;
background-color:blue;
float: left;
}
.kutu3{
width:20%;
height: auto;
background-color:purple;
float: left;
}
Hocam öncelikle teşekkür ederim.Bu yapıyı denedim nispeten masa üstünde istediğim görüntüyü verdi fakat mobilde batırdı etti biraz daha editledim ileriye giderek fakat bu %ler mobilde büyük dert açıyor başa hiç bir resim tam ekran alta alta sığmıyor bu seferde
kod yapısı şu şekilde bu konuda var mıdır bir ipucu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div class="navbar">
<ul class="item">
<li class="items"><a href="">Anasayfa</a> </li>
<li class="items"><a href="">İletişim</a></li>
</ul>
</div>
<div class="images">
<div class="image">
<img src="x1.jpg" alt="" class="img-1">
</div>
<div class="ads">
<img src="indir.jpg">
<img src="indir.jpg" alt="">
</div>
</div>
<div class="general-sidebar">
<div class="sidebar">
<ul class="sidebar-item">
<li class="sidebar-items"><a href="">1AAA.</a></li>
<li class="sidebar-items"><a href="">1AAA.</a></li>
<li class="sidebar-items"><a href="">1AAAA.</a></li>
<li class="sidebar-items"><a href="">1AAA.</a></li>
<li class="sidebar-items"><a href="">1AAA.</a></li>
</ul>
</div>
<div class="sidebar2">
<ul class="sidebar2-item">
<li class="sidebar2-items">1AAAAA.</li>
<li class="sidebar2-items">2.AAAA</li>
</ul>
</div>
</div>
</body>
</html>
.image{
width:35%;
height: auto;
float: left;
}
.ads{
width: 17.5%;
height:auto;
float: left;
margin-right: 1rem;
}
.ads2{
width: 17.5%;
height:auto;
float: left;
}
.sidebar{
width: 10%;
float: left;
}
.sidebar2{
width: 10%;
float: left;
}
.sidebar .sidebar-item {
list-style: none;
}
.sidebar2 .sidebar2-item {
list-style: none;
}
.navbar .item{
list-style: none;
}
@media screen and (max-width: 600px)
{
.images{
width: 100%;
display:flex;
flex-direction: column;
align-items:center
}
.general-sidebar{
display:flex;
flex-direction: column;
justify-content: center;
}
.img-1{
width:100%;
}
}