JQuery kullanarak bir `div` içine iç içe başka bir `div` eklemek oldukça basittir. Ayrıca, eklenen iç içe `div`lerin responsive olması için, uygun CSS kurallarını eklemek gerekir.
Örnek olarak, aşağıda JQuery kullanarak bir `div` içine iç içe başka bir `div` eklemeyi ve responsive olacak şekilde düzenlemeyi göstereceğim.
HTML kodu:
```html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Div Ekleme</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="ana-div">
<!-- jQuery tarafından eklenecek iç içe div buraya eklenecek -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
CSS dosyası (`styles.css`):
```css
.ana-div {
background-color: lightgray;
padding: 20px;
}
.ic-div {
background-color: skyblue;
padding: 10px;
margin: 10px;
}
/* Responsive düzenlemeler */
@media screen and (max-width: 768px) {
.ana-div {
padding: 10px;
}
.ic-div {
margin: 5px;
padding: 5px;
}
}
```
JQuery kodu (`script.js`):
```js
$(document).ready(function () {
// İç içe divleri eklemek için JQuery kullanıyoruz
var icDivHTML = '<div class="ic-div">İç İçe Div</div>';
$('.ana-div').append(icDivHTML);
});
```
Bu kodlarda, ana `div`'imizin içine JQuery ile bir iç içe `div` ekliyoruz. Eklenen iç içe `div`, `.ic-div` sınıfı ile stilendiriliyor ve içeriği "İç İçe Div" metni oluyor. Aynı zamanda, responsive olmasını sağlamak için CSS dosyasında `@media` sorgusu kullanarak ekstra stil düzenlemeleri yapıyoruz.
Örneğin, ekran genişliği 768 piksel veya daha az olduğunda, ana `div` ve iç içe `div`lerin padding ve margin değerlerini küçülterek daha uygun bir responsive görünüm sağlıyoruz.
Bu örnek, temel bir JQuery kullanımı ve responsive düzenlemeler içermektedir. Projenize uygun olarak kodları düzenleyebilir veya geliştirebilirsiniz.
