Question

我的网站分为3个div，它们彼此水平相邻，我希望它们随着屏幕变小而相互影响。他们这样做，但是左边的边距小于右边的边距。我不知道该改变什么

.card-block {
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
  background-color: lightgrey;
}

.card-block .card-block-content {
  display: inline;
  margin: 0 auto;
  float: left;
  padding: 0px;
  border-right: 1px solid black;
  width: 33.2%;
  min-width: 300px;
}

.card-block .card-block-content p {
  padding: 10px;
}

<div class="card-block">
  <div class="card-block-content" style="background-color: red;">
    <p> 1 </p>
  </div>
  <div class="card-block-content" style="background-color: green;">
    <p> 2 </p>
  </div>
  <div class="card-block-content" style="background-color: blue;">
    <p> 3 </p>
  </div>
</div>

Answer 1

您可以使用CSS媒体查询https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

指定您的网站在确定的规格中的外观

Answer 2

您应该使用媒体屏幕查询，并且在特定宽度中，您应该将浮动设置为无，并将边距设置为自动。它应该工作。

@media screen and (max-width:900px) {
.card-block .card-block-content{float:none; margin: auto}
 }

Answer 3

CSS flexbox是处理这种行为的好方法。

请参阅下面的代码段。

＆＃13;

import java.util.Scanner;
class Student {

    public String name;
    public int id;
    public float gpa;
}
public class learning {

    public static void main(String[] args) {

        Scanner input = new Scanner(System.in);

        Student s1 = new Student();
        System.out.print("Enter your name: ");
        s1.name = input.nextLine();
        System.out.print("Enter your id: ");
        s1.id = input.nextInt();
        System.out.print("Enter your gpa: ");
        s1.gpa = input.nextFloat();


        Student s2 = new Student();
        System.out.print("Enter your name: ");
        s2.name = input.nextLine();
        System.out.print("Enter your id: ");
        s2.id = input.nextInt();
        System.out.print("Enter your gpa: ");
        s2.gpa = input.nextFloat();


        Student s3 = new Student();
        System.out.print("Enter your name: ");
        s3.name = input.nextLine();
        System.out.print("Enter your id: ");
        s3.id = input.nextInt();
        System.out.print("Enter your gpa: ");
        s3.gpa = input.nextFloat();

        System.out.println("your name: " + s1.name + "\n"
                + "your id: " + s1.id + "\n"
                + "your GPA: " + s1.gpa);

    }

}

＆＃13;

.card-block {
width: 70%;
display: flex;
flex-wrap: wrap;
margin-left: 15%;
margin-right: 15%;
background-color: lightgrey;
margin: auto;
}

.card-block .card-block-content {
padding: 0px;
border-right: 1px solid black;
width: 33.2%;
min-width: 300px;
display: flex;
flex: 1;
}

.card-block .card-block-content p {
padding: 10px;
}

＆＃13;

希望这会有所帮助：）

我希望我的div彼此相邻，但是当屏幕变小时，它们应该相互影响

3 个答案: