Question

所以我有一个目标，但我不知道它是否可能：这是我得到的图像：https://screencast.com/t/88ImEmMif

代码：

<style type="text/css">
    #contrainer {
        width: 100%;
    }
    #main {
        width: 600px;
        margin:0 auto;
    }
    .wrapper {
        display: inline-block;
    }
    .parent {

        flex-direction: column;
    }
    .child {
        border: 1px solid #0EA2E8;
        margin: 2px;
        padding: 5px;
        display: inline-block;
    }
</style>

<div id="container">
    <div id="main">
        <div class="anchors">
            <div class="wrapper">
                <div class="parent">
                    <?php
                    $links = array("https://google.com","foo", "bar", "hello", "world","google.com","google.com/adwords/","foo", "bar", "hello", "world","https://google.com/gmail","https://google.com/adwords/");
                    foreach($links as $link) {

                        echo '<div class="child">'.$link.'</div>';

                    }
                    ?>
                </div>
            </div>
        </div>
    </div>
</div>

以下是我要做的事：https://screencast.com/t/ze5fCya3wpbJ

因此，根据框中的长度，每个框的宽度都相同。

Answer 1

您可以尝试灵活设置固定高度：

使用lorem ipsum文本的示例。 （您的pHp不是HTML输出）

＆＃13;

div {/* your .parent */
  display: flex;
  height: 4em;/* makes about 2 lines before wrapping to next */
  flex-direction: column;
  flex-wrap: wrap;
  width: 500px;
  margin: auto;
}

b {/* your .child */
  border: solid 1px turquoise;
  margin: 2px;
  padding:2px;
}

＆＃13;

<div>
  <b>lorem</b>
  <b>Pellentesque</b>
  <b>habitant</b>
  <b>morbi</b>
  <b>tristique</b>
  <b>senectus</b>
  <b>et</b>
  <b>netus</b>
  <b>et</b>
  <b>malesuada</b>
  <b>fames</b>
  <b>ac</b>
  <b>turpis</b>
  <b>egestas.</b>
</div>

＆＃13;

Answer 2

替代方法是在外部div 上使用 FlexBox ，应用样式flex-wrap: wrap;和justify-content: space-between;使其均匀分布并在内部分布外部div 。感谢 FlexBox ，每个内容都有自己的宽度。

＆＃13;

.box {
  width: 600px;
  margin:0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

p {
  margin: 0 0 5px;
  padding: 3px 5px;
  border: 1px solid black;
}

＆＃13;

<div class="box">
  <p>Bulbasaur</p>
  <p>Ivysaur</p>
  <p>Venusaur</p>
  <p>Charmander</p>
  <p>Charmeleon</p>
  <p>Ash</p>
  <p>Charizard</p>
  <p>Squirtle</p>
  <p>Wartortle</p>
  <p>Blastoise</p>
  <p>Ekans</p>
  <p>Pikachu</p>
  <p>Paras</p>
  <p>Abra</p>
</div>

＆＃13;

在foreach中创建宽度为顶部div的div

2 个答案: