Question

自CSS诞生以来，我对它感到非常震惊。无论如何，我试图了解一种执行现代CSS布局的功能方法。

假设一个站点具有顶部菜单，左侧浮动菜单，右侧浮动新闻源和中心内容。

我已经尝试过：

<div class="hud">
  <a class="hud-link" href="https://stackoverflow.com">Link Here 1</a>
</div>
<br>
<div class="hud">
  <a class="hud-link" href="https://google.com">Link Here 2</a>
</div>
<br>
<div class="hud">
  <a class="hud-link" href="https://yahoo.com">Link Here 3</a>
</div>
<br>
<div class="hud">
  <a class="hud-link" href="https://bing.com">Link Here 4</a>
</div>
<br>
<input type="number" min="0" max="4" value="0">

<button>Click Link</button>

.leftcontent {
  float:left;
  height:100%;
  background-color:blue;
}
.rightcontent {
  float:left;
  height:100%;
  background-color:aqua;
}
.centercontent {
  height:100%;
  background-color:green;
}

not working, wow

好吧，我很失望。所有浮动的解释无济于事。我期待的是左右浮动div和中心内容。

或者，做我描述的最好方法是什么？带有内嵌（或内嵌块）显示的div？如果您链接示例，我也可以工作

有人可以修复或提供可行的示例吗？

Answer 1

您可以使用position: fixed使左右菜单浮动。

body {
  margin: 0;
  padding: 0;
}
.leftcontent {
  position: fixed;
  width: 25%;
  top: 0;
  left: 0;
  background-color:blue;
}
.rightcontent {
  position: fixed;
  width: 25%;
  top: 0;
  right: 0;
  background-color:aqua;
}
.centercontent {
  width: 50%;
  margin: 0 auto;
  background-color:green;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="container">

  <div class="leftcontent">
    Well, you can tell by the way I use my walk
    I'm a woman's man, no time to talk
    Music loud and women warm, I've been kicked around
    Since I was born
    And now it's alright, it's okay
    And you may look the other way
    We can try to understand
    The New York Times' effect on man
    Whether you're a brother or whether you're a mother
    You're stayin' alive, stayin' alive
    Feel the city breakin' and everybody shakin'
    And we're stayin' alive, stayin' alive
    Ah, ha, ha, ha, stayin' alive, stayin' alive
    Ah, ha, ha, ha, stayin' alive
    Well now, I get low and I get high
    And if I can't get either, I really try
    Got the wings of heaven on my shoes
    I'm a dancin' man and I just can't lose
    You know it's alright, it's okay
    I'll live to see another day
    We can try to understand
    The New…
  </div>
  <div class="centercontent">
    Every day I wake up
    Every day I wake up alone
    Every day I wake up
    Every day I wake up alone
    Let me open up the discussion with 
    I'm not impressed 
    With any mother fucking word I say
    See I lied that I cried
    When he came inside
    And now I'm burning a highway Hades
    Shut the fuck up
    When I'm trying to think
    I gotta keep my concentration 
    Give me one more drink
    And then I'll try to remember all the advice 
    That my good book told me
    And all the lost souls say
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Or get me out of the sun
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Someone get me out of the sun
    Drugs, bars, backseats of cars blowing boys
    What a boring life I've led so far
    Just a prime thirteen 
    When I…
    Every day I wake up
    Every day I wake up alone
    Every day I wake up
    Every day I wake up alone
    Let me open up the discussion with 
    I'm not impressed 
    With any mother fucking word I say
    See I lied that I cried
    When he came inside
    And now I'm burning a highway Hades
    Shut the fuck up
    When I'm trying to think
    I gotta keep my concentration 
    Give me one more drink
    And then I'll try to remember all the advice 
    That my good book told me
    And all the lost souls say
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Or get me out of the sun
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Someone get me out of the sun
    Drugs, bars, backseats of cars blowing boys
    What a boring life I've led so far
    Just a prime thirteen 
    When I…Every day I wake up
    Every day I wake up alone
    Every day I wake up
    Every day I wake up alone
    Let me open up the discussion with 
    I'm not impressed 
    With any mother fucking word I say
    See I lied that I cried
    When he came inside
    And now I'm burning a highway Hades
    Shut the fuck up
    When I'm trying to think
    I gotta keep my concentration 
    Give me one more drink
    And then I'll try to remember all the advice 
    That my good book told me
    And all the lost souls say
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Or get me out of the sun
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Someone get me out of the sun
    Drugs, bars, backseats of cars blowing boys
    What a boring life I've led so far
    Just a prime thirteen 
    When I…
  </div>
  <div class="rightcontent">
    The only thing I ever wanted
    The only thing I ever needed
    Is my own way, I gotta have it all
    I don't want your opinion, I don't need your ideas
    Stay the fuck out of my face, stay away from me
    I am my own God, I do as I please
    Just wipe your own ass and shut your mouth
    I had enough and you're going down
    Shut your mouth
    What comes around you know goes around
    My mind is playing tricks on me
    I am not as stable as I used to be
    Pushed and shoved, you know you're going too far
    I will not break my back for you no more
    I am gonna go my way, I am gonna take control
    Time to wake up and dig myself out of this hell
    Just wipe your own ass and shut your mouth
    I had enough and you're going down
    Shut your…
  </div>

</div>

</body>
</html>

Answer 2

Flexbox很现代，只需最小的CSS即可解决问题，只需添加此类：

.container{
  display:flex;
  flex-direction:row;
}

如果要使内容具有固定的滚动位置或其他效果，请阅读此MDN resource。

就个人而言，为避免使用纯CSS构建布局，我建议使用Bootstrap，因为它附带了许多看起来非常好并且易于使用的工具和模板。

现代网页设计中的CSS布局

2 个答案: