两天前，我问为什么一些被分成几列的内容被推到另一列下面，并得到了@Josie一个非常有帮助的答案。这一直起作用，直到我做了一个桌子，并且由于某种原因它打破了显示顺序。一些背景：通过使用CSS创建不相等的列，我试图将页面分成一个大列，其中包含主要内容（）和作为侧边栏的更薄的列（）。但是，侧边栏被推到主要内容下方，除非我将任何一列的宽度比实际宽度小2%。.leftcolumn.rightcolumn我尝试按照这个答案的建议切换标签的顺序，但这没有效果。我还试图为主要内容提供属性[如此处的答案所建议][2]，但这仅将主要内容中的两个示例帖子合并为一行，而对侧边栏没有影响。我测试的另一件事是分配给主要内容和侧边栏，这是[这个答案给出的解决方案][3]，但这对实际显示没有影响。我还尝试@rajneesh-tiwari的建议在下面定义侧边栏的父容器下，但这也对显示没有影响。display: flexposition: relativeposition: absolutez-index: 999下面是代码。由于某种原因，侧边栏闯入了桌子的底部...<head> <style> * { color: black; font-family: Arial, sans-serif; } body { background: gray; padding: 5px; } .header { background-color: white; border-radius: 4px; padding: 25px; text-align: center; } .header h1 { font-size: 50px; } .header p { font-size: 15px; font-style: italic; } .topnav { background-color: #444; border-radius: 4px; display: flex; justify-content: center; overflow: hidden; } .topnav a { color: white; float: left; max-width: 25%; padding: 12px 16px; text-align: center; text-decoration: none; width: 100%; } .topnav a:hover { background-color: #eee; color: black; } .topnav a:active { background-color: #444; color: white; } .leftcolumn { float: left; width: 75%; } .rightcolumn { background-color: white; float: left; padding-left: 20px; width: calc(25% - 20px); } .card { background-color: white; border-radius: 4px; margin-top: 20px; padding: 20px; } .row:after { clear: both; content: ""; display: table; } table { border: 1px solid black; border-collapse: collapse; font-family: Arial, sans-serif; margin: 5px; width: 100%; }
2 回答
幕布斯7119047
TA贡献1794条经验 获得超8个赞
您应该为 2 个子 div 提供公共父项（行）中的左列和右列）。这应该可以解决这里的问题。
PS - 这与问题无关。执行上述操作应该可以解决您当前的问题。但是，并排排列项目的理想方法是使用弹性框。你可以给行。无需使用浮子 - 留给两个孩子，这将是实现这种布局的理想方式
.row {
display: flex
}
一个更好的解决方案是使用引导，你可以使用booprap网格系统轻松实现这种类型的布局 - https://getbootstrap.com/docs/4.1/layout/grid/
<head>
<style>
* {
color: black;
font-family: Arial, sans-serif;
}
body {
background: gray;
padding: 5px;
}
.header {
background-color: white;
border-radius: 4px;
padding: 25px;
text-align: center;
}
.header h1 {
font-size: 50px;
}
.header p {
font-size: 15px;
font-style: italic;
}
.topnav {
background-color: #444;
border-radius: 4px;
display: flex;
justify-content: center;
overflow: hidden;
}
.topnav a {
color: white;
float: left;
max-width: 25%;
padding: 12px 16px;
text-align: center;
text-decoration: none;
width: 100%;
}
.topnav a:hover {
background-color: #eee;
color: black;
}
.topnav a:active {
background-color: #444;
color: white;
}
.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
background-color: white;
float: left;
padding-left: 20px;
width: calc(25% - 20px);
}
.card {
background-color: white;
border-radius: 4px;
margin-top: 20px;
padding: 20px;
}
.row:after {
clear: both;
content: "";
display: table;
}
table {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
width: 100%;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
padding: 5px;
}
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
padding: 0;
width: 100%;
}
}
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Weight Calculator</h1>
</div>
<div class="topnav">
<a href="index.html">Home</a>
<a href="calculator.html">Calculator</a>
<a href="solutions.html">Solutions</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<table>
<caption>Weight Calculator</caption>
<tr>
<th>Person</th>
<th>Weight</th>
</tr>
<tr>
<td>Jack</td>
<td id="jack" oninput="myFunction()">1</td>
</tr>
<tr>
<td>John</td>
<td id="john" oninput="myFunction()">2</td>
</tr>
<tr>
<td>Joe</td>
<td id="joe" oninput="myFunction()">3</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</table>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h3>Test</h3>
<p>Text</p>
</div>
<div class="card">
<h3>Test</h3>
<p>Text</p>
</div>
<div class="card">
<h3>Test</h3>
<p>Text</p>
</div>
</div>
</div>
<script type="text/javascript">
document.getElementById("jack").contentEditable = true;
document.getElementById("john").contentEditable = true;
document.getElementById("joe").contentEditable = true;
function myFunction() {
var jack2 = document.getElementById("jack").innerText;
var john2 = document.getElementById("john").innerText;
var joe2 = document.getElementById("joe").innerText;
var total2 = parseInt(jack2) + parseInt(john2) + parseInt (joe2);
document.getElementById("total").innerHTML = total2;
}
myFunction();
</script>
</body>
慕尼黑5688855
TA贡献1848条经验 获得超2个赞
.row:after {
clear: both;
content: "";
display: table;
}
“清楚：两者”是问题所在。要么删除它，要么将其设置为“清除：右”
添加回答
举报
0/150
提交
取消