如何连续对齐两列 CSS

Question

我正在尝试将两列按钮并排对齐，以用作指向其他页面的链接。我让他们在他们的位置，但他们被压扁了。见下面的代码。我也想创建一个响应式布局，但它是一种浓缩形式。

定位不是我的强项，所以感谢任何建议。

section {
    background-color: #ede6c1;
    padding: 15px;
    margin: auto;
    text-align: center;
}

p {
    font-family: "Times New Roman", Times, serif;
    color: #080000;
}

article {
    border: black;
    width: 100%;
    height: 100%;
    padding: 10px;
    margin: 10px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    box-sizing: border-box;
    margin: 0;
    font-family: Arial;
}


/* two equal columns that floats next to each other */

.row {
    display: -ms-flexbox;
    /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap;
    /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
    justify-content: center;
}

.column {
    -ms-flex: 25%;
    /* IE10 */
    flex: 20%;
    max-width: 20%;
    padding: 0 4px;
    margin: 30px;
}

.menu-button {
    background-color: rgba(85, 100, 83, 0.8);
    padding: 20px 0;
    font-size: 30px;
    margin: 10px;
    width: 200px;
    min-width: 100px;
    border-radius: 25px;
    box-shadow: 5px 5px 5px rgba(71, 69, 69, 0.787);
}

.menu-button:hover {
    width: 200px;
    height: 40%;
    box-shadow: 1px 1px 1px rgba(71, 69, 69, 0.787);
    color: black;
}

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: rgba(71, 69, 69, 0.787);
    text-decoration: none;
}


/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

 <section>
        <article>
            <h1>Seattle Colours</h1>
            <div class="row">
                <div class="column">

                    <a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button" style="width:100%">Wood
                     type</a>


                    <a class="menu-button" href="../Wood-Type/.html" role="button" style="width:100%">Specification</a>

                    <a class="menu-button" href="../Wood-Type/.html" role="button" style="width:100%">Pricing</a>

                </div>

                <div class="column">
                    <a class="menu-button" href="../Wood-Type/.html" role="button" style="width:100%">News</a>


                    <a class="menu-button" href="../Wood-Type/.html" role="button" style="width:100%">FAQ</a>

                    <a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button" style="width:100%">Images</a>

                </div>
            </div>
        </article>
    </section>

Answer 1

将 "menu-button" 上的显示属性设置为 "flex"。这是 fiddle https://jsfiddle.net/7c1bfz3u/

menu-button {
    background-color: rgba(85, 100, 83, 0.8);
    padding: 20px 0;
    font-size: 20px;
    margin: 10px;
    width: 200px;
    display:flex;
    padding:20px;
    min-width: 100px;
    border-radius: 25px;
    box-shadow: 5px 5px 5px rgba(71, 69, 69, 0.787);
}

Answer 2

每个 column 应该具有相同的 flex-basis，并且由于您需要两列，50% flex-basis 就可以了。我使用下面的 flex shorthand 来告诉浏览器不允许 flex-grow 而 flex-shrink 是允许的，这与你在parent (.row).

这让您完成了大部分工作，但您的按钮仍然显示 inline，这导致它们以不希望的方式堆叠并且宽度不一致。将它们设置为 display: block 可以解决这两个问题，并允许您删除无论如何都没有被关注的 width: 100%。

我删除了响应式改编，因为它们会干扰 Whosebug 上的演示。

section {
  background-color: #ede6c1;
  padding: 15px;
  text-align: center;
}

article {
  padding: 10px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  justify-content: center;
}

.column {
  -ms-flex: 50%; /* IE10 */
  flex: 0 1 auto;
  margin: 30px;
}

.menu-button {
  display: block;
  box-sizing: border-box;
  background-color: rgba(85, 100, 83, 0.8);
  padding: 20px 0;
  font-size: 30px;
  margin: 10px 0;
  width: 200px;
  border-radius: 25px;
  box-shadow: 5px 5px 5px rgba(71, 69, 69, 0.787);
}

.menu-button:hover {
  box-shadow: 1px 1px 1px rgba(71, 69, 69, 0.787);
  color: black;
}

a {
  color: black;
  text-decoration: none;
}

a:hover {
  color: rgba(71, 69, 69, 0.787);
  text-decoration: none;
}

<section>
  <article>
    <h1>Seattle Colours</h1>
    <div class="row">
      <div class="column">
        <a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button">Wood type</a>
        <a class="menu-button" href="../Wood-Type/.html" role="button">Specification</a>
        <a class="menu-button" href="../Wood-Type/.html" role="button">Pricing</a>
      </div>

      <div class="column">
        <a class="menu-button" href="../Wood-Type/.html" role="button">News</a>
        <a class="menu-button" href="../Wood-Type/.html" role="button">FAQ</a>
        <a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button">Images</a>
      </div>
    </div>
  </article>
</section>

如何连续对齐两列 CSS

how to align two columns in a row CSS

html

css

position

button

hyperlink