第一个网站 - 乱七八糟,但当我添加边距时第二列向下移动(不在第一列旁边) - 不知道如何修复

问题描述 投票:0回答:2

body {
  background-color: #040081;
  font-family: Arial, Helvetica, sans-serif;
  padding: 50px;
  box-sizing: border-box;
}

.header {
  padding: 20px;
  background-color: #1612AA;
  text-align: center;
  font-family: "Roboto" sans-serif;
  font-size: 40px;
  text-shadow: 2px 0 #F36502, -2px 0 #F36502, 0 2px #F36502, 1px 1px #F36502, -1px -1px #F36502, 1px -1px #F36502, -1px 1px #F36502;
  position: relative;
  height: 200px;
}

.part1 {
  float: left;
  width: 80%;
}

.part2 {
  float: right;
  width: 20%;
}

.img1 {
  border-radius: 20px;
  margin-top: 10px;
}

.row:after {
  display: grid;
  clear: both;
}

.columnLeft {
  float: left;
  width: 70%;
  margin-top: 50px;
}

.columnRight {
  float: right;
  width: 30%;
  margin-top: 50px;
  margin-left: 50px;
}

.card {
  background-color: #1612AA;
  color: #F36502;
  padding: 20px;
}

.img2 {
  border-radius: 20px;
  width: 80%;
  padding-left: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Fractal Forward</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="header">
    <h1 class="part1">Fractal Forward</h1>
    <img src="mandelImage.webp" class="part2 img1">
  </div>

  <div class="row">
    <div class="columnLeft">
      <div class="card">
        <h2>Blog Entry Title</h2>
        <img src="image1.jpeg" class="img2">
        <p>This is the beginning of the blog Yay Yay Ya! The first couple sentences. Eventually I'm going to figure out how to code it so the first three sentences are automatically here and I don't have to type it out...</p>
      </div>
    </div>
    <div class="columnRight">
      <div class="card">

      </div>
    </div>
  </div>
</body>

</html>

我尝试添加“margin-left: 50px;”到 .columnRight 类,以便两列之间有空间,但每次我这样做时,它都会将 columnRight 移动到 columnLeft 下方。如果没有列的边距,两列之间就没有分隔,而且看起来不太好。不知道如何解决这个问题,或者我做错了什么。这是我第一次尝试创建网站,这也是我的第一个真正的症结所在。任何帮助将不胜感激 - 谢谢!

html css css-grid margin margin-left
2个回答
0
投票

margin-left: 50px;
添加到
.columnRight
类会将其移到
.columnLeft
下面的原因是因为两列都是浮动的。当元素浮动时,它会从文档的正常流程中移除,并放置在其浮动容器旁边。这意味着除非您清除这两列,否则它们将重叠。

要清除浮动,您可以将以下 CSS 添加到您的

.row
类中:

.row:after {
    content: "";
    display: block;
    clear: both;
}

:after
伪元素在
.row
元素之后创建一个新元素。
content
属性用于设置新元素的文本内容,但在本例中我们将其设置为空字符串。这意味着新元素将不可见,但仍会占用文档中的空间。
display: block
属性使新元素表现得像块元素,而
clear: both
属性会清除左右浮动。

:after
伪元素添加到
.row
类后,您应该能够将
margin-left: 50px;
添加到
.columnRight
类,而不会将其移动到
.columnLeft
下面。

以下是进行这些更改后 CSS 的外观示例:

body {
    background-color: #040081;
    font-family: Arial, Helvetica, sans-serif;
    padding: 50px;
    box-sizing: border-box;
}

.header {
    padding: 20px;
    background-color: #1612AA;
    text-align: center;
    font-family: "Roboto" sans-serif;
    font-size: 40px;
    text-shadow: 2px 0 #F36502, -2px 0 #F36502, 0 2px #F36502, 1px 1px #F36502, -1px -1px #F36502, 1px -1px #F36502, -1px 1px #F36502;
    position: relative;
    height: 200px;
}

.part1 {
    float: left;
    width: 80%;
}

.part2 {
    float: right;
    width: 20%;
}

.img1 {
    border-radius: 20px;
    margin-top: 10px;
}

.row:after {
    content: "";
    display: block;
    clear: both;
}

.columnLeft {
    float: left;
    width: 70%;
    margin-top: 50px;
}

.columnRight {
    float: right;
    width: 30%;
    margin-top: 50px;
    margin-left: 50px;
}

.card {
    background-color: #1612AA;
    color: #F36502;
    padding: 20px;
}

.img2 {
    border-radius: 20px;
    width: 80%;
    padding-left: 20px;
}

我希望这有帮助!


0
投票

像这样使用CSS函数calc

.columnRight {
  /*other properties*/
  width: calc(30% - 50px);
  /*other properties*/
}
© www.soinside.com 2019 - 2024. All rights reserved.