Question

我有2个div元素：我的导航菜单的左列，以及带有主要内容的主要内容 div。< / p>

之前我正在调整它们：

#leftnav {
  float: left;
  width: 19vw;
}

#content {
  position: relative;
  left: 19vw;
  width: 81%;
}

这一切都很好，直到窗口太小，所以主要内容将开始缩小超出其内容???无论哪种方式，我决定更改代码以将导航菜单和主要内容与width: auto处的内容并排浮动。但无论我尝试什么，主要内容 div都不会自动将其自动定位在左侧 nav 旁边。相反，它与左 nav 列重叠。

我认为代码应该为您提供正确的信息。我也会尝试添加一个JFiddle ..

body{
padding:0%;
margin:0%;
width:100%;
height:850px;
font-size:16px;
}


.mainwrap{ 
position:relative; 
top:6px; 
left:5px;
width:100%; 
height:100%; 

}

.left{
position:relative;
top:0.2%;
width:18vw; 
height:auto;
float:left;
padding-left:.5vw;
padding-right:.5vw;
margin-right:10px;
background:#f4f4f4;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
font-size:1em;

}



    #centralcolumn{
    position:relative;
    top:0%; 
    width:auto; 
    float:left;
    height:auto;
    background: #aaa;
    border-left:1px solid #000;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-bottom:1px solid #bbb; 

        }


<body>
<div class="mainwrap">


<div class="left">

<div class='links1'>
<a href="">About Links</a><br><br>
<a href="">Links Forums</a><br><br>
<a href="">Best-of-Links</a><br><br>
<a href="">Links YouTube</a><br><br>
</div>




<div id="centralcolumn"></div>


</div>

<body>

看到小提琴，div s并不浮动。内容 div具有自动扩展到窗口非常重要 - 因此：width: auto。

关于为什么div没有正确浮动的任何想法？非常感谢。

https://jsfiddle.net/kxvhqcy9/1/

Answer 1

将width提供给#centralcolumn ID并将box-sizing:border-box提供给整个网站。它包括：边距，边框，填充和实际内容。

＆＃13;

html {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -moz-box-sizing: inherit;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
body {
  padding: 0%;
  margin: 0%;
  width: 100%;
  height: 850px;
  font-size: 16px;
}
.mainwrap {
  position: relative;
  top: 6px;
  left: 5px;
  width: 100%;
  height: 100%;
}
.left {
  position: relative;
  top: 0.2%;
  width: 20%;
  height: auto;
  float: left;
  padding-left: .5vw;
  padding-right: .5vw;
  margin-right: 2%;
  background: #f4f4f4;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  font-size: 1em;
  border-left: 1px solid #bbb;
  border-right: 1px solid #bbb;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}
#centralcolumn {
  position: relative;
  top: 0%;
  width: auto;
  float: left;
  height: auto;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background: #aaa;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  width:78%;
}

＆＃13;

<body>
  <div class="mainwrap">
    <div class="left">
      <div class='links1'>
        <a href="">About LinkD</a>
        <br>
        <br>
        <a href="">LinkD Forums</a>
        <br>
        <br>
        <a href="">Best-of-LinkD</a>
        <br>
        <br>
        <a href="">LinkD YouTube</a>
        <br>
        <br>
      </div>
      mixed content , mixed content mixed content , mixed content mixed content , mixed content mixed content , mixed content mixed content , mixed content# mixed content , mixed content mixed content , mixed content mixed content , mixed content
    </div>
    <div id="centralcolumn">
      mixed content , mixed contentmixed content , mixed content , mixed content mixed content , mixed content mixed content , mixed content mixed content , mixed content mixed content , mixed content
    </div>
  </div>
  <body>

＆＃13;

Answer 2

您也可以使用flex。

＆＃13;

body {
  padding: 0%;
  margin: 0%;
  width: 100%;
  height: 850px;
  font-size: 16px;
}

.mainwrap {
  position: relative;
  top: 6px;
  left: 5px;
  width: 100%;
  height: 100%;
}

.mainwrap {
  display: inline-flex;
}

.left {
  position: relative;
  top: 0.2%;
  width: 18vw;
  height: auto;
  float: left;
  padding-left: .5vw;
  padding-right: .5vw;
  margin-right: 10px;
  background: #f4f4f4;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  font-size: 1em;
  border-left: 1px solid #bbb;
  border-right: 1px solid #bbb;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}

#centralcolumn {
  position: relative;
  top: 0%;
  width: auto;
  float: left;
  height: auto;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background: #aaa;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}

＆＃13;

<body>
  <div class="mainwrap">


    <div class="left">

      <div class='links1'>
        <a href="">About LinkD</a><br><br>
        <a href="">LinkD Forums</a><br><br>
        <a href="">Best-of-LinkD</a><br><br>
        <a href="">LinkD YouTube</a><br><br>
      </div>
      mixed content , mixed content mixed content , mixed content mixed content , mixed content mixed content , mixed content mixed content , mixed content# mixed content , mixed content mixed content , mixed content mixed content , mixed content
    </div>


    <div id="centralcolumn">

      mixed content , mixed contentmixed content , mixed content , mixed content mixed content , mixed content mixed content , mixed content mixed content , mixed content mixed content , mixed content
    </div>




  </div>

  <body>

＆＃13;

浮动divs Nav＆amp;内容不并排浮动

2 个答案: