所以我正在尝试实现以下列的效果:
使用下面的代码，我已经能够实现图像的左侧。左边的三个盒子位置很好。 我不确定如何在不影响所有左侧的情况下添加右侧的列/框。 (请注意右侧的白色补丁就是图像所在的位置，不用担心)。
HTML:
<html>
<head>
<title>Exodus - Testing</title>
<link rel=StyleSheet href="main.css" type="text/css" media=screen>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="wrap">
<div class="user_con">
</div>
<!-- <div class="gen_info">
<div> -->
<div class="rules">
</div>
<div class="song_con">
</div>
<div class="status_bar">
</div>
</div>
</body>
CSS:
.wrap {
width: 900px;
height: 700px;
border: 1px solid black;
}
/* TOP LEFT USER SECTION */
.user_con {
width: 430px;
height: 150px;
margin: 10px;
background-color: rgba( 23,23,23,1.0);
}
/* RIGHT COLUMN (INFORMATION GENERAL) */
/* .gen_info {
width: 430px;
height: 650px;
margin: 10px;
display: inline;
float: right;
background-color: rgba( 23,23,23,1.0);
} */
/* LEFT COLUMN (RULES) */
.rules {
width: 430px;
height: 350px;
margin: 10px;
background-color: rgba( 23,23,23,1.0);
}
/* BOTTOM LEFT COLUMN (MUSIC AND CONNECTION INFO) */
.song_con {
width: 430px;
height: 125px;
margin: 10px;
background-color: rgba( 23,23,23,1.0);
}
/* STATUS BAR (DOWNLOAD BAR) */
.status_bar {
width: 880px;
height: 5px;
margin: 10px;
background-color: rgba( 44,44,44,1.0);
}
我确实尝试过添加 float 和显示，但都没有奏效，至少我是这样做的。我注释掉了右侧列的 CSS 和 HTML 以生成左侧。
最佳答案
经过最少的编辑，我已经让它看起来非常接近您的图像。
步骤:
- 取消注释右列的代码(HTML 和 CSS)
- 修复了结束
.gen_infodiv 标签。 - 将
.gen_info移到了.wrap的顶部。
.wrap {
width: 900px;
height: 700px;
border: 1px solid black;
}
/* TOP LEFT USER SECTION */
.user_con {
width: 430px;
height: 150px;
margin: 10px;
background-color: rgba(23, 23, 23, 1.0);
}
/* RIGHT COLUMN (INFORMATION GENERAL) */
.gen_info {
width: 430px;
height: 650px;
margin: 10px;
display: inline;
float: right;
background-color: rgba(23, 23, 23, 1.0);
}
/* LEFT COLUMN (RULES) */
.rules {
width: 430px;
height: 350px;
margin: 10px;
background-color: rgba(23, 23, 23, 1.0);
}
/* BOTTOM LEFT COLUMN (MUSIC AND CONNECTION INFO) */
.song_con {
width: 430px;
height: 125px;
margin: 10px;
background-color: rgba(23, 23, 23, 1.0);
}
/* STATUS BAR (DOWNLOAD BAR) */
.status_bar {
width: 880px;
height: 5px;
margin: 10px;
background-color: rgba(44, 44, 44, 1.0);
}<div class="wrap">
<div class="gen_info">
</div>
<div class="user_con">
</div>
<div class="rules">
</div>
<div class="song_con">
</div>
<div class="status_bar">
</div>
</div>(注意:您可能需要点击代码段中的“整页”，否则滚动条会分散注意力)
关于html - 交错列效应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36070469/