1. 首页
  2. 问答
  3. CSS浮动，除了正确的位置以外浮动

CSS浮动，除了正确的位置以外浮动

2017-05-02 56 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

相关问题

 相关问题