Question

所以我试图在下面的列中实现这种效果：

使用下面的代码，我已经能够实现图像的左侧。左边的三个方框都很好。 我不确定如何添加正确的列/框而不影响所有左侧。（注意右边的白色补丁就是图像的去处，不用担心这个。）

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);
}

我确实尝试过添加浮动和显示，但没有工作，至少我是怎么做的。我注释掉右侧列的CSS和HTML来生成左侧。

Answer 1

通过最少的编辑，我已经让它看起来非常接近你的形象。

步骤：

取消注释右栏（HTML＆amp; CSS）的代码
修正了结束.gen_info div标记。
将.gen_info移至.wrap的顶部。

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

（注意：您可能需要点击代码段中的＆＃34;整页＆＃34;否则滚动条会分散注意力）

交错的列效果

1 个答案: