Question

我认为您需要查看结果才能理解我的问题。

    int open_eth_read_socket(char *interface_name) {
        int socket_fd;
        struct ifreq if_options;
        struct timeval timeout;
        timeout.tv_sec = 10;
        timeout.tv_usec = 0;
        // Get socket
        socket_fd = socket(PF_PACKET, SOCK_RAW, htons(ETH_P_ALL));
        if(socket_fd < 0) exit(EXIT_ERROR);
        // Zero ifreq
        memset(&if_options, 0, sizeof(struct ifreq));
        // Put interface_name in
        strcpy(if_options.ifr_name, interface_name);
        // Set timout
        int ret = setsockopt(socket_fd, SOL_SOCKET, SO_RCVTIMEO,
                       (char *)&timeout,sizeof(timeout));
        if(ret < 0) exit(EXIT_ERROR);
        // Bind this socket to the specified interface.
        ret = setsockopt(socket_fd, SOL_SOCKET, SO_BINDTODEVICE,
                   interface_name, strlen(interface_name));
        if(ret < 0) exit(EXIT_ERROR);
        // Get flags
        if(ioctl(socket_fd, SIOCGIFFLAGS, &ifopts) < 0) exit(EXIT_ERROR);
        // Add promisc flag
        ifopts.ifr_flags |= IFF_PROMISC;
        // Set flags
        if(ioctl(socket_fd, SIOCSIFFLAGS, &ifopts) < 0) exit(EXIT_ERROR);
        return socket_fd;
    }

.boxAAA {
  border: 4px solid #548235;
  background-color: #F2F2F2;
  margin: auto;
  width: 75%;
  padding: 10px;
  text-align: center;
}

#boxBBB {
  border: 2px solid #002060;
  background-color: #F2F2F2;
  padding: 10px;
  min-width: 250px;
  margin-right: 290px;
}

#boxCCC {
  float: right;
  border: 2px solid #002060;
  background-color: #F2F2F2;
  width: 250px;
  padding: 10px;
}

h3 {
  text-align: center;
}

如果您运行该脚本，您会看到当页面大小更改时，boxCCC具有固定的宽度。但是，如果页面尺寸太小，它将与boxBBB重叠。我想要的是，当两个盒子碰撞时，boxCCC被放置在boxBBB下面。然后页面将如下所示：

<div class="boxAAA">
  <h2>AAA</h2>
</div>

</br>

<div id="boxCCC">
  <h3>CCC</h3>The quick brown fox
</div>

<div id="boxBBB">
  <h3>BBB</h3>
  </br>
  <img src="xxxxxxxxxxxxx.png">
  </br>
  The quick brown fox
  </br>
</div>

</br>
</br>

<div style="padding: 10px; border:2px solid #002060; background-color:#F2F2F2; color:black;">
  <h3>DDD</h3>
  <p>The quick brown fox
</div>

</br>

我想要的是boxBBB和boxCCC是并排的，除非页面太小并且它们发生碰撞。在这种情况下，我希望boxCCC位于boxBBB下方。

有谁知道怎么做？

Answer 1

测量您需要的宽度，并使用此宽度设置媒体查询

@media screen and (max-width: measured width) {}

在这种情况下不要使用<br>。用CSS（边距，填充，......）来做它

使用flexbox

完全改变布局

＆＃13;

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

div[class^="box-"] {
  border: 1px solid black;
  height: 100px;
  margin-bottom: 20px;
}

.box-a {
  width: 70%;
  margin-left: auto;
  margin-right: auto !important;
}

.box-b {
  -webkit-box-flex: 0.7;
  -ms-flex: 0.7;
  flex: 0.7;
  margin-right: 20px;
}

.box-c {
  -webkit-box-flex: 0.3;
  -ms-flex: 0.3;
  flex: 0.3;
}

@media screen and (max-width: 767px) {
  .wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .box-a {
    width: 100%;
  }
  .box-b {
    margin-right: 0;
  }
}

＆＃13;

<div class="box-a">
  Box A
</div>
<div class="wrapper">
  <div class="box-b">Box B</div>
  <div class="box-c">Box C</div>
</div>
<div class="box-d">Box D</div>

＆＃13;

发生爆炸时在页面上移动项目

1 个答案: