1. 首頁
  2. 問答
  3. CSS浮動，除了正確的位置以外浮動

CSS浮動，除了正確的位置以外浮動

2017-05-02 80 views
3

我一直在試圖解決這個問題。我很茫然。我搜索並嘗試了大部分我能找到的解決方案，但沒有運氣。CSS浮動，除了正確的位置以外浮動

我正在建立一個基本的網站，作爲我自己的一個愛好項目的一部分。我試圖讓頁面內容分成兩部分;左和右。然而，左邊總是坐在正確的內容之上。就好像它忽略了float:left;和float: right;命令。

body { 
 
    font-family: 'Noto Sans', sans-serif; 
 
    background-color: #DAA520; 
 
} 
 

 
#container { 
 
    width: 80%; 
 
    margin: 25px auto; 
 
    background: #fff !important; 
 
    border: 1px solid black; 
 
    border-radius: 10px; 
 
    overflow: auto; 
 
} 
 

 
.header img { 
 
    padding-left: 30%; 
 
    float: none; 
 
} 
 

 
.header { 
 
    border-bottom: 5px solid #ccc; 
 
    margin-bottom: 4px; 
 
    height: 300px; 
 
} 
 

 
.nav ul { 
 
    list-style: none; 
 
    width: 100%; 
 
    margin-top: 25px; 
 
    text-align: center; 
 
} 
 

 
.nav li { 
 
    float: left; 
 
    width: 24%; 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    margin-left: 2px; 
 
} 
 

 
.nav li:hover { 
 
    background: gold; 
 
} 
 

 
.banner img { 
 
    display: block; 
 
    height: 400px; 
 
    width: 100%; 
 
} 
 

 
.sub1 h3, 
 
p { 
 
    float: left; 
 
    margin-left: 10px; 
 
    width: 48%; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.sub2 { 
 
    float: right; 
 
    margin-right: 10px; 
 
    width: 48%; 
 
    display: flex; 
 
    display: inline-block; 
 
    position: relative; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="css/day1.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet"> 
 
    <title>Bakem and Shakem</title> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <div class="header"> 
 
     <img src="http://kojaks.betterplacesonline.com/wp-content/uploads/2016/09/Kojaks-Houose-of-Ribs-BBQ-Tampa-Logo-w-slogan-one-line-001-retina.png" alt="Logo"> 
 

 
     <div class="nav"> 
 
     <ul> 
 
      <li>Home</li> 
 
      <li>Recipes</li> 
 
      <li>Contact</li> 
 
      <li>Bakem</li> 
 
     </ul> 
 

 
     </div> 
 
     <!-- navigation bar divider --> 
 

 

 
    </div> 
 
    <!-- header divider --> 
 

 
    <div class="banner"> 
 
     <img src="http://www.brucelauderdale.com/wp-content/uploads/2011/08/ribs.png" alt="banner"> 
 
    </div> 
 
    <div class="sub1"> 
 
     <h3>We make em, you bake em!</h3> 
 
     <p>Boudin ham hock fatback, tongue beef ribs drumstick capicola picanha pork chop meatloaf. Strip steak meatball hamburger tri-tip flank. Biltong sirloin spare ribs tongue, shank cupim corned beef burgdoggen venison. Kevin shankle sirloin porchetta 
 
     frankfurter. 
 
     </p> 
 

 
    </div> 
 
    <!-- sub1 divider --> 
 

 
    <div class="sub2"> 
 
     <form class="signup" action="index.html" method="post"> 
 
     <h3>Sign up for our news letter</h3> 
 
     <p>Be apart of the bakem family</p> 
 
     <input type="text" name="name" value="name"><label for="email" required>Name</label> 
 
     <input type="email" name="email" value="email" required><label for="email">Email address</label> 
 
     </form> 
 
    </div> 
 
    <!-- sub2 divider --> 
 

 

 
    </div> 
 
    <!-- conatiner divider --> 
 

 

 
</body> 
 

 
</html>

的主要問題可以在SUB1和SUB2類被發現。我開始認爲這應該是另一個階級，我已經制定了一個與這個衝突的規則，我不確定。

來源

2017-05-02 Futurewaves

回答

0

你是左邊的列不列本身應用樣式的元素。我剛剛從那個.sub1風格的規則中剝離了h3和p，我認爲它是你之後的。由於您正在渲染的頁面大小 - 以全屏模式最好地查看運行代碼段 - 但您應該看到的是底部的兩列內容。

body { 
 
     font-family: 'Noto Sans', sans-serif; 
 
     background-color: #DAA520; 
 
     } 
 

 
    #container { 
 
    width: 80%; 
 
    margin: 25px auto; 
 
    background: #fff !important; 
 
    border: 1px solid black; 
 
    border-radius: 10px; 
 
    overflow: auto; 
 
    } 
 

 
    .header img { 
 
    padding-left: 30%; 
 
    float: none; 
 
     } 
 

 
    .header { 
 
    border-bottom: 5px solid #ccc; 
 
    margin-bottom: 4px; 
 
    height: 300px; 
 
    } 
 

 
    .nav ul { 
 
    list-style: none; 
 
    width: 100%; 
 
    margin-top: 25px; 
 
    text-align: center; 
 
    } 
 

 
    .nav li { 
 
    float: left; 
 
    width: 24%; 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    margin-left: 2px; 
 
     } 
 

 
    .nav li:hover { 
 
    background: gold; 
 
     } 
 

 
    .banner img { 
 
     display: block; 
 
     height: 400px; 
 
     width: 100%; 
 
     } 
 

 
    .sub1 { 
 
    float: left; 
 
    margin-left: 10px; 
 
    width: 48%; 
 
    display: inline-block; 
 
    position: relative; 
 
     } 
 

 
    .sub2 { 
 
    float: right; 
 
    margin-right: 10px; 
 
     width: 48%; 
 
     display: flex; 
 
    display: inline-block; 
 
    position: relative; 
 
     }
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="css/day1.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet"> 
 
    <title>Bakem and Shakem</title> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <div class="header"> 
 
     <img src="http://kojaks.betterplacesonline.com/wp-content/uploads/2016/09/Kojaks-Houose-of-Ribs-BBQ-Tampa-Logo-w-slogan-one-line-001-retina.png" alt="Logo"> 
 

 
     <div class="nav"> 
 
     <ul> 
 
      <li>Home</li> 
 
      <li>Recipes</li> 
 
      <li>Contact</li> 
 
      <li>Bakem</li> 
 
     </ul> 
 

 
     </div> 
 
     <!-- navigation bar divider --> 
 

 

 
    </div> 
 
    <!-- header divider --> 
 

 
    <div class="banner"> 
 
     <img src="http://www.brucelauderdale.com/wp-content/uploads/2011/08/ribs.png" alt="banner"> 
 
    </div> 
 
    <div class="sub1"> 
 
     <h3>We make em, you bake em!</h3> 
 
     <p>Boudin ham hock fatback, tongue beef ribs drumstick capicola picanha pork chop meatloaf. Strip steak meatball hamburger tri-tip flank. Biltong sirloin spare ribs tongue, shank cupim corned beef burgdoggen venison. Kevin shankle sirloin porchetta 
 
     frankfurter. 
 
     </p> 
 

 
    </div> 
 
    <!-- sub1 divider --> 
 

 
    <div class="sub2"> 
 
     <form class="signup" action="index.html" method="post"> 
 
     <h3>Sign up for our news letter</h3> 
 
     <p>Be apart of the bakem family</p> 
 
     <input type="text" name="name" value="name"><label for="email" required>Name</label> 
 
     <input type="email" name="email" value="email" required><label for="email">Email address</label> 
 
     </form> 
 
    </div> 
 
    <!-- sub2 divider --> 
 

 

 
    </div> 
 
    <!-- conatiner divider --> 
 

 

 
</body> 
 

 
</html>

來源

2017-05-02 08:01:54 gavgrif

+0

非常感謝！你一提到它，我就意識到了。 – Futurewaves

0 

body { 
 
    font-family: 'Noto Sans', sans-serif; 
 
    background-color: #DAA520; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
#container { 
 
    width: 80%; 
 
    margin: 25px auto; 
 
    background: #fff !important; 
 
    border: 1px solid black; 
 
    border-radius: 10px; 
 
    overflow: auto; 
 
} 
 

 
.header img { 
 
    width: 100%; 
 
} 
 

 
.header { 
 
    border-bottom: 5px solid #ccc; 
 
    margin-bottom: 4px; 
 
    height: 300px; 
 
} 
 

 
.nav { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
.nav ul { 
 
    list-style: none; 
 
    width: 100%; 
 
    margin-top: 25px; 
 
    text-align: center; 
 
} 
 

 
.nav li { 
 
    float: left; 
 
    width: 24%; 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    margin-left: 2px; 
 
} 
 

 
.nav li:hover { 
 
    background: gold; 
 
} 
 

 
.banner img { 
 
    display: block; 
 
    height: 400px; 
 
    width: 100%; 
 
} 
 

 
.sub1 { 
 
    display: inline-block; 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.sub1 h3, 
 
p { 
 
    margin-left: 10px; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.sub2 { 
 
    float: right; 
 
    width: 50%; 
 
    display: flex; 
 
    display: inline-block; 
 
    position: relative; 
 
}
<div id="container"> 
 
    <div class="header"> 
 
    <img src="http://kojaks.betterplacesonline.com/wp-content/uploads/2016/09/Kojaks-Houose-of-Ribs-BBQ-Tampa-Logo-w-slogan-one-line-001-retina.png" alt="Logo"> 
 
    <div class="nav"> 
 
     <ul> 
 
     <li>Home</li> 
 
     <li>Recipes</li> 
 
     <li>Contact</li> 
 
     <li>Bakem</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="banner"> 
 
    <img src="http://www.brucelauderdale.com/wp-content/uploads/2011/08/ribs.png" alt="banner"> 
 
    </div> 
 
    <div class="sub1"> 
 
    <h3>We make em, you bake em!</h3> 
 
    <p>Boudin ham hock fatback, tongue beef ribs drumstick capicola picanha pork chop meatloaf. Strip steak meatball hamburger tri-tip flank. Biltong sirloin spare ribs tongue, shank cupim corned beef burgdoggen venison. Kevin shankle sirloin porchetta frankfurter. 
 
    </p> 
 
    </div> 
 
    <div class="sub2"> 
 
    <form class="signup" action="index.html" method="post"> 
 
     <h3>Sign up for our news letter</h3> 
 
     <p>Be apart of the bakem family</p> 
 
     <input type="text" name="name" value="name"><label for="email" required>Name</label> 
 
     <input type="email" name="email" value="email" required><label for="email">Email address</label> 
 
    </form> 
 
    </div> 
 
</div>

來源

2017-05-02 08:01:22

0

降低的第二部分的寬度。這兩個部分沒有空間排成一排。

body { 
 
    font-family: 'Noto Sans', sans-serif; 
 
    background-color: #DAA520; 
 
} 
 

 
#container { 
 
    width: 80%; 
 
    margin: 25px auto; 
 
    background: #fff !important; 
 
    border: 1px solid black; 
 
    border-radius: 10px; 
 
    overflow: auto; 
 
} 
 

 
.header img { 
 
    padding-left: 30%; 
 
    float: none; 
 
} 
 

 
.header { 
 
    border-bottom: 5px solid #ccc; 
 
    margin-bottom: 4px; 
 
    height: 300px; 
 
} 
 

 
.nav ul { 
 
    list-style: none; 
 
    width: 100%; 
 
    margin-top: 25px; 
 
    text-align: center; 
 
} 
 

 
.nav li { 
 
    float: left; 
 
    width: 24%; 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    margin-left: 2px; 
 
} 
 

 
.nav li:hover { 
 
    background: gold; 
 
} 
 

 
.banner img { 
 
    display: block; 
 
    height: 400px; 
 
    width: 100%; 
 
} 
 

 
.sub1 h3, 
 
p { 
 
    float: left; 
 
    margin-left: 10px; 
 
    width: 48%; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.sub2 { 
 
    float: right; 
 
    margin-right: 10px; 
 
    width: 45%; 
 
    display: flex; 
 
    display: inline-block; 
 
    position: relative; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="css/day1.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet"> 
 
    <title>Bakem and Shakem</title> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <div class="header"> 
 
     <img src="http://kojaks.betterplacesonline.com/wp-content/uploads/2016/09/Kojaks-Houose-of-Ribs-BBQ-Tampa-Logo-w-slogan-one-line-001-retina.png" alt="Logo"> 
 

 
     <div class="nav"> 
 
     <ul> 
 
      <li>Home</li> 
 
      <li>Recipes</li> 
 
      <li>Contact</li> 
 
      <li>Bakem</li> 
 
     </ul> 
 

 
     </div> 
 
     <!-- navigation bar divider --> 
 

 

 
    </div> 
 
    <!-- header divider --> 
 

 
    <div class="banner"> 
 
     <img src="http://www.brucelauderdale.com/wp-content/uploads/2011/08/ribs.png" alt="banner"> 
 
    </div> 
 
    <div class="sub1"> 
 
     <h3>We make em, you bake em!</h3> 
 
     <p>Boudin ham hock fatback, tongue beef ribs drumstick capicola picanha pork chop meatloaf. Strip steak meatball hamburger tri-tip flank. Biltong sirloin spare ribs tongue, shank cupim corned beef burgdoggen venison. Kevin shankle sirloin porchetta 
 
     frankfurter. 
 
     </p> 
 

 
    </div> 
 
    <!-- sub1 divider --> 
 

 
    <div class="sub2"> 
 
     <form class="signup" action="index.html" method="post"> 
 
     <h3>Sign up for our news letter</h3> 
 
     <p>Be apart of the bakem family</p> 
 
     <input type="text" name="name" value="name"><label for="email" required>Name</label> 
 
     <input type="email" name="email" value="email" required><label for="email">Email address</label> 
 
     </form> 
 
    </div> 
 
    <!-- sub2 divider --> 
 

 

 
    </div> 
 
    <!-- conatiner divider --> 
 

 

 
</body> 
 

 
</html>

來源

2017-05-02 08:03:18 athi

0

好，yupp，你有這片一個問題：你有沒有規則的 「一列」

.sub1 h3, p { 
    float: left; 
    margin-left: 10px; 
    width: 48%; 
    display: inline-block; 
    position: relative; 
    }

，您將規則應用於它的元素，那是不正確的。

只是刪除 「H3，P」 的一部分，我想你會得到你所需要的東西：

.sub1 { 
     float: left; 
     margin-left: 10px; 
     width: 48%; 
     display: inline-block; 
     position: relative; 
     }

https://jsfiddle.net/dwvv0x77/

來源

2017-05-02 08:10:36 2oppin

+0

嘻嘻 - 已經發布 - 這是一個在這裏回答比賽的答案 – gavgrif

0

評論這個類：

.sub1 h3, p { 
/* float: left; */ 
/* margin-left: 10px; */ 
/* width: 48%; */ 
/* display: inline-block; */ 
/* position: relative; */ 
}

添加此等級：

.sub1 { 
width: 50%; 
float:left; 
}

這必須工作！

來源

2017-05-02 08:12:57

相關問題

 相關問題