cari

Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk mencapai kedudukan mendatar tiga div dalam HTML?

<p>Saya sedang mencipta tapak web sampel dengan tiga sekatan mendatar. Saya mahu partition paling kiri 25% lebar, partition tengah 50% lebar, dan partition kanan 25% lebar supaya partition memenuhi 100% ruang secara mendatar. </p> <pre class="brush:php;toolbar:false;"><html> <tajuk> Tajuk laman web </title> <div id="the whole thing" style="height:100%; width:100%" > <div id="leftThing" style="position: relative; width:25%; background-color:blue;"> menu kiri </div> <div id="content" style="position: relative; width:50%; background-color:green;"> kandungan rawak </div> <div id="rightThing" style="position: relative; width:25%; background-color:yellow;"> menu yang betul </div> </div> </html></pre> <p>https://i.stack.imgur.com/NZDJe.jpg</p> <p>Apabila saya melaksanakan kod ini, div kelihatan bertindih. Saya mahu mereka muncul sebelah menyebelah! </p> <p>Apakah yang perlu saya lakukan? </p>
P粉419164700P粉419164700504 hari yang lalu567

membalas semua(2)saya akan balas

  • P粉478445671

    P粉4784456712023-08-22 13:51:31

    Saya tahu ini soalan yang sangat lama. Saya menyiarkan penyelesaian kepada masalah ini di sini, menggunakan FlexBox. Inilah penyelesaiannya: 

    #container {
  height: 100%;
  width: 100%;
  display: flex;
}
#leftThing {
  width: 25%;
  background-color: blue;
}
#content {
  width: 50%;
  background-color: green;
}
#rightThing {
  width: 25%;
  background-color: yellow;
}
    <div id="container">

  <div id="leftThing">
    左侧菜单
  </div>

  <div id="content">
    随机内容
  </div>

  <div id="rightThing">
    右侧菜单
  </div>

</div>

    Hanya tambah display:flex dalam bekas! Tidak perlu menggunakan pelampung.

    balas
    0
  • P粉842215006

    P粉8422150062023-08-22 11:58:42

    Saya mengesyorkan agar tidak menggunakan pelampung untuk menangani situasi ini, saya lebih suka menggunakan inline-block.

    Beberapa perkara lagi untuk dipertimbangkan:

    • Gaya sebaris tidak baik untuk kebolehselenggaraan
    • Sepatutnya tiada ruang dalam nama pemilih
    • Anda mengabaikan beberapa teg HTML penting, seperti <head>和<body>
    • Anda tidak sertakan doctype

    Berikut ialah cara yang lebih baik untuk memformat dokumen anda: 

    <!DOCTYPE html>
<html>
<head>
<title>网站标题</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">左侧菜单</div>
    <div id="middle">随机内容</div>
    <div id="right">右侧菜单</div>
</div>
</body>
</html>

    Ini juga jsFiddle untuk rujukan.

    balas
    0
  • Batalbalas