HTML/CSS 中的按钮/网格问题

Question

我对按钮的设置有疑问。我不确定我是否需要网格系统？我希望它看起来像这个例子：

还没有代码，因为我不确定从哪里开始，从什么开始。

如果有人可以提供帮助，请先帮助！

Answer 1

可以肯定的是，网格非常适合您的设计。但是，您并不明确需要网格来获得该结果。 Css flexbox display (display:flex) 也可以，也许可以满足您的需求。即使 display: block 也行。

如果您需要仅由行或列组成的网页布局，那么 Flexbox 是最好的模型。但是，如果您有复杂的 multi-row 和 multi-column 布局，那么您需要使用 CSS 网格。

查看更多详情：https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/

这是一个简单的 set-up 设计，考虑了 flexbox：

假设您的第一个组件（徽标和用户配置文件）在一个 div 中。您可以使用 display:flex and flex-direction: row 将它们显示在一行中，并使用 justify-content: space-between 使元素填满整行。

那么你有4个按钮。您可以使用另一个 div 并将 flex-direction 设置为 column。根据需要更改 div 和按钮的宽度。

基本上，最后一个 div 与第一个类似。

对于每个 div，您可以指定不同的宽度或高度。

Answer 2

您可以使用 flex，justify-content，align-items，如下例所示：

.wrapped {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 500px;
}

.avatar {
 width: 50px;
 height: auto;
}

button {
 width: 200px;
}

.div1 {
 display: flex;
 justify-content: center;
 padding: 10px;
}

.div2 {
 display: flex;
 flex-direction: column;
 padding: 10px;
}

.div2 button{
 width: 200px;
 margin: 6px;
 padding: 5px;
}

.div3 {
 display: flex;
 padding: 10px;
 margin-left: 0px;
 align-items: center;
}

.div3 button {
 width: 40px;
 height: 30px;
 margin-left: 160px;
}

.bell {
 width: 30px;
 padding: 10px;
 flex-basis: 1000px;
}

<section class="wrapped">
 <div class="div1">
  <button>At campus</button>
  <img class="avatar" src="https://media.istockphoto.com/vectors/user-icon-flat-isolated-on-white-background-user-symbol-vector-vector-id1300845620?k=20&m=1300845620&s=612x612&w=0&h=f4XTZDAv7NPuZbG0habSpU0sNgECM0X7nbKzTUta3n8=" />
 </div>
 <div class="div2">
  <button>Q & A</button>
  <button>Klasser</button>
  <button>Grupper</button>
  <button>Chat</button>
 </div>
 <div class="div3">
  <img class="bell" src="https://www.iconpacks.net/icons/1/free-bell-icon-860-thumb.png"/>
  <button>Help</button>
 </div>
 
</section>

HTML/CSS 中的按钮/网格问题

Problems with buttons / grid in HTML/CSS

html

css

grid

button

bootstrap-4