Bagaimana untuk Mencipta Div Boleh Diperkembangkan Lebar 100% dengan Margin Tanpa Limpahan?

Cara Memaparkan Div Boleh Dikembangkan (100% Lebar) dengan Margin

Dalam senario ini, anda mempunyai elemen div dengan lebar 100% yang perlu boleh dikembangkan sambil mengekalkan marginnya. Pendekatan mudah menggunakan margin nampaknya menyebabkan beberapa isu limpahan. Bagaimanakah anda boleh membetulkan perkara ini?

Penyelesaian terletak pada penggunaan fungsi calc() CSS. Dengan menolak nilai margin yang dikehendaki daripada 100%, anda boleh melaraskan lebar div secara dinamik berdasarkan saiz skrin. Ini memastikan bahawa keseluruhan lebar bekas induk digunakan tanpa sebarang masalah pertindihan atau limpahan.

Berikut ialah coretan kod CSS dikemas kini yang menggabungkan fungsi calc():

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}

Sebagai alternatif, anda juga boleh mempertimbangkan untuk menggunakan pelapik dan bukannya jidar dan menggunakan ciri saiz kotak: kotak sempadan. Pendekatan ini menyediakan kefungsian yang serupa dan disokong oleh penyemak imbas utama:

#page {
  background: red;
  width: 100%;
  height: 300px;
  padding: 10px;
}

#margin {
  box-sizing: border-box;
  background: green;
  width: 100%;
  height: 300px;
}

Dengan melaksanakan teknik ini, anda boleh memaparkan div boleh dikembangkan dengan 100% lebar dengan berkesan sambil mengekalkan jidar yang konsisten merentas resolusi skrin yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Div Boleh Diperkembangkan Lebar 100% dengan Margin Tanpa Limpahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!