Question

我有两个div彼此相邻，这很好，但是当你改变浏览器或设备的大小时，我希望在第一个div下面有第二个div但是这个代码不起作用。

<div class="wrap">
<div class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor eu arcu quis tristique. Vestibulum vel odio scelerisque, placerat leo porttitor, dapibus sapien. Sed lacus ante, posuere eu mollis quis, interdum sit amet est. Aliquam tincidunt, arcu vitae pretium viverra, eros elit ultricies ante, in convallis ante erat sed nunc. Aliquam feugiat mollis lacinia. Nulla non dolor sit amet eros vehicula gravida ut ac nisi. Aliquam ut congue metus. Mauris id justo in arcu viverra lobortis. Duis dictum malesuada libero quis fermentum.      </div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor eu arcu quis tristique. Vestibulum vel odio scelerisque, placerat leo porttitor, dapibus sapien. Sed lacus ante, posuere eu mollis quis, interdum sit amet est. Aliquam tincidunt, arcu vitae pretium viverra, eros elit ultricies ante, in convallis ante erat sed nunc. Aliquam feugiat mollis lacinia. Nulla non dolor sit amet eros vehicula gravida ut ac nisi. Aliquam ut congue metus. Mauris id justo in arcu viverra lobortis. Duis dictum malesuada libero quis fermentum.</div>

div.wrap {clear:both; margin: 0 auto; position: relative;}
div.one {float: left; border: 1px solid black; max-width: 40%; margin-right: 5%;}
div.two {float: left; max-width: 40%; border: 1px solid black;}

由于

Answer 1

如果您添加min-width，您将实现此目的：http://jsfiddle.net/v393gd3o/

div.one {
     float: left; 
     border: 1px solid black; 
     min-width: 200px; 
     max-width: 40%; 
     margin-right: 5%;
}


div.two {
    float: left;
    min-width: 200px; 
    max-width: 40%; 
    border: 1px solid black;
}

Answer 2

要将一个div放在另一个div下，您可以使用CSS FlexBox

您需要将$json = $_POST["a"]; $json = json_decode($json, true); echo $json['scr'];设置为<div class="wrap">和display: flex，并且内部div将彼此相邻。

比将flex-direction: row设置为<div class="wrap">并且内部div将被放置在“列”中 - 一个在另一个下面。

您可以为不同的flex-direction: column设置此类行为。或者检查wrapper-div /浏览器大小的变化并从一种样式切换到另一种样式。

两个div彼此相邻

2 个答案: