如何将网站分成三个不等长的列。

huangapple
go评论107阅读模式
英文:

How to divide a website into three unequal length columns

问题

我一直在尝试创建一个分为3列的网站，其中两列的宽度为15%，中间一列的宽度为70%。但是，我无法让这3列占用网站空间的100%宽度。以下是我的代码：

  1. <!-- language: lang-css -->
  2. body {
  3.   width: 100%;
  4.   max-width: 960px;
  5.   margin: 0;
  6. }
  8. div.content {
  9.   width: 100%;
  10.   display: flex;
  11. }
  13. div.column1 {
  14.   width: 15%;
  15.   background-color: aqua;
  16. }
  18. div.column2 {
  19.   width: 70%;
  20.   background-color: green;
  21. }
  23. navbar {
  24.   position: relative;
  25.   display: -ms-flexbox;
  26.   display: flex;
  27.   -ms-flex-wrap: wrap;
  28.   flex-wrap: wrap;
  29.   -ms-flex-align: center;
  30.   align-items: center;
  31.   -ms-flex-pack: justify;
  32.   justify-content: space-between;
  33.   padding: 0.5rem 1rem;
  34. }
  36. .navbar-text {
  37.   display: inline-block;
  38.   padding-top: 0.5rem;
  39.   padding-bottom: 0.5rem;
  40. }
  42. .nav {
  43.   display: -ms-flexbox;
  44.   display: flex;
  45.   -ms-flex-wrap: wrap;
  46.   flex-wrap: wrap;
  47.   padding-left: 0;
  48.   margin-bottom: 0;
  49.   list-style: none;
  50. }
  1. <!-- language: lang-html -->
  2. <body style="padding-top: 70px">
  3.   <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
  4.     <img class="navbar-brand" src="img/logo.png" width="80" height="50" alt="" />
  5.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
  6.       <span class="navbar-toggler-icon">2</span>
  7.     </button>
  8.     <div class="collapse navbar-collapse" id="navbarSupportedContent1">
  9.       <ul class="navbar-nav mr-auto">
  10.         <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
  11.         <li class="nav-item"> <a class="nav-link" href="#">Classes</a></li>
  12.         <li class="nav-item"> <a class="nav-link" href="#">Gallery</a></li>
  13.         <li class="nav-item"> <a class="nav-link" href="#">Location</a></li>
  14.         <li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
  15.       </ul>
  16.     </div>
  17.   </nav>
  18.   <div class="content">
  19.     <div class="column1">
  20.       <h1> this is column 1</h1>
  21.       tting, remairem
  22.     </div>
  23.     <div class="column2">
  24.       <h1> this is column 2</h1>
  25.       Lorem Ip Lorem
  26.     </div>
  27.     <div class="column1">
  28.       <h1> this is column 1</h1>
  29.       Lorem Ipsum ing Lorem
  30.     </div>
  31.   </div>
  32. </body>

根据你提供的代码，你希望三列占用整个网页宽度。但是，你可能忽略了默认的外边距和内边距，它们会影响到宽度的计算。你可以尝试在CSS中添加以下样式来重置外边距和内边距：

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }

这将确保没有任何额外的外边距或内边距干扰到你的列的宽度计算。然后，你的三列应该占用整个网页的宽度。

英文:

I have been trying to create a website divided into 3 Columns of unequal length, being more specific two of 15% in the sides, and one of 70% in the centre. However I am not being able to manage that the 3 columns take 100% width of the space of my wesbite.
Here's my code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. body {
  2. width: 100%;
  3. max-width: 960px;
  4. margin: 0;
  5. }
  6. div.content {
  7. width: 100%;
  8. display: flex;
  9. }
  10. div.column1 {
  11. width: 15%;
  12. background-color: aqua;
  13. }
  14. div.column2 {
  15. width: 70%;
  16. background-color: green;
  17. }
  18. navbar {
  19. position: relative;
  20. display: -ms-flexbox;
  21. display: flex;
  22. -ms-flex-wrap: wrap;
  23. flex-wrap: wrap;
  24. -ms-flex-align: center;
  25. align-items: center;
  26. -ms-flex-pack: justify;
  27. justify-content: space-between;
  28. padding: 0.5rem 1rem;
  29. }
  30. .navbar-text {
  31. display: inline-block;
  32. padding-top: 0.5rem;
  33. padding-bottom: 0.5rem;
  34. }
  35. .nav {
  36. display: -ms-flexbox;
  37. display: flex;
  38. -ms-flex-wrap: wrap;
  39. flex-wrap: wrap;
  40. padding-left: 0;
  41. margin-bottom: 0;
  42. list-style: none;
  43. }

<!-- language: lang-html -->

  1. &lt;body style=&quot;padding-top: 70px&quot;&gt;
  2. &lt;nav class=&quot;navbar fixed-top navbar-expand-lg navbar-light bg-light&quot;&gt;
  3. &lt;img class=&quot;navbar-brand&quot; src=&quot;img/logo.png&quot; width=&quot;80&quot; height=&quot;50&quot; alt=&quot;&quot; /&gt;
  4. &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarSupportedContent1&quot; aria-controls=&quot;navbarSupportedContent1&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt; &lt;span class=&quot;navbar-toggler-icon&quot;&gt;2&lt;/span&gt;&lt;/button&gt;
  5. &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent1&quot;&gt;
  6. &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
  7. &lt;li class=&quot;nav-item active&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt; &lt;/li&gt;
  8. &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Classes&lt;/a&gt;&lt;/li&gt;
  9. &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Gallery&lt;/a&gt;&lt;/li&gt;
  10. &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Location&lt;/a&gt;&lt;/li&gt;
  11. &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
  12. &lt;/ul&gt;
  13. &lt;/div&gt;
  14. &lt;/nav&gt;
  15. &lt;div class=&quot;content&quot;&gt;
  16. &lt;div class=&quot;column1&quot;&gt;
  17. &lt;h1&gt; this is column 1&lt;/h1&gt;
  18. tting, remairem&lt;/div&gt;
  19. &lt;div class=&quot;column2&quot;&gt;
  20. &lt;h1&gt; this is column 2&lt;/h1&gt;
  21. Lorem Ip Lorem&lt;/div&gt;
  22. &lt;div class=&quot;column1&quot;&gt;
  23. &lt;h1&gt; this is column 1&lt;/h1&gt;
  24. Lorem Ipsum ing Lorem&lt;/div&gt;
  25. &lt;/div&gt;

<!-- end snippet -->

As you can see I have on top of my body a fixed navbar that was imported from bootstrap from dreamweaver,
and the a new div containing the three columns.

With this code I get the following output:

如何将网站分成三个不等长的列。

Do you guys know why the columns are not taking 100% width of the website?

答案1

得分: 0

100%的宽度在这里不起作用，因为div.content的父级是页面主体。如果父级已经设置了一些宽度，那么任何%的宽度都可以工作，因此CSS有一些值可以计算%。在这种情况下，由于您希望它覆盖整个页面，并且该div没有父级，最简单的做法是将%更改为vw。
vw代表视窗宽度，表示整个页面宽度的%（而不是父级）。

  1. div.content {
  2.     width: 100vw;
  3.     display: flex;
  4. }
英文:

Width of 100% wont work here, because parent of div.content is page body. Width of any % works, if the parent has already some width set, so the CSS has some value to calculate the % of. In this case, since you want it to cover the whole page, and the div does not have a parent, the easiest thing to do is to change % to vw.
vw stands for viewport-width and represents % of the whole page width (not parent).

  1. div.content{
  2. width:100vw;
  3. display:flex;
  4. }

huangapple
  • 本文由 发表于 2023年1月9日 01:25:58
  • 转载请务必保留本文链接：https://go.coder-hub.com/75049917.html
  • css
  • flexbox
  • html
  • multiple-columns
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定