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

Question

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

“我想要它的示例”

如果有人可以提供帮助，那么汉克斯就在Advanced中！

Answer 1

您可以与flex，正当内容，对准目标一起使用，例如以下示例：

.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>

Answer 2

可以肯定的是，网格可以完美地适合您的设计。但是，您不需要明确的网格来获得该结果。 CSS Flexbox Display（显示：Flex）也可以正常工作，也许适合您的需求。甚至显示：块将起作用。

如果您需要仅由行或列组成的Web布局，则FlexBox是最适合使用的模型。但是，如果您有复杂的，多排和多列的布局，则需要使用CSS网格。

请查看更多详细信息：

---

​

​徽标和用户配置文件）在一个Div内。您可以使用显示：flex and flex方向：行在一行中显示它们，josify-content：space-bettent中间，因此元素填充了整个行。

然后您有4个按钮。您可以使用另一个DIV并将flex方向设置为列。根据需要更改DIV和按钮的宽度。

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

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