我正在创建按钮,并将它们完美地居中放置,在我将div链接到整个div时,我在其div上使用了一个flexbox包装器,这些div向左浮动,下面的“五列”收缩是代码示例。我要完成的工作是,每列中有5列是一个与文本对齐的图标。
.FlexBox {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
width: 100%;
}
.FiveColumns {
width: 20%;
float: left;
}
.GreyBorder {
border: 2px solid #B2B2B2;
}
<section>
<div class="FullWidth FlexBox">
<asp:HyperLink ID="AirFare_HyperLink" runat="server" NavigateUrl="">
<div class="FiveColumns GreyBorder">
<asp:Image ID="Image4" runat="server" ImageUrl="https://mktcdn.500px.org/assets/icons/lightbox_placeholder_icon@2x-a5b4509ac42a996d07b9f32379f1eae19310a57d38e5914c59230bfa36815c9a.png" />
<h6 class="Blue Bold NoMargin">
AIRFARE
<p class="Italic">product</p>
</h6>
</div>
</asp:HyperLink>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="">
<div class="FiveColumns GreyBorder">
<asp:Image ID="Image1" runat="server" ImageUrl="https://mktcdn.500px.org/assets/icons/lightbox_placeholder_icon@2x-a5b4509ac42a996d07b9f32379f1eae19310a57d38e5914c59230bfa36815c9a.png" />
<h6 class="Blue Bold NoMargin">
CRUISE
<p class="Italic">product</p>
</h6>
</div>
</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="">
<div class="FiveColumns GreyBorder">
<asp:Image ID="Image2" runat="server" ImageUrl="https://mktcdn.500px.org/assets/icons/lightbox_placeholder_icon@2x-a5b4509ac42a996d07b9f32379f1eae19310a57d38e5914c59230bfa36815c9a.png" />
<h6 class="Blue Bold NoMargin">
VACATION
<p class="Italic">product</p>
</h6>
</div>
</asp:HyperLink>
<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="">
<div class="FiveColumns GreyBorder ">
<asp:Image ID="Image3" runat="server" ImageUrl="https://mktcdn.500px.org/assets/icons/lightbox_placeholder_icon@2x-a5b4509ac42a996d07b9f32379f1eae19310a57d38e5914c59230bfa36815c9a.png" />
<h6 class="Blue Bold NoMargin">
REBATE
<p class="Italic">product</p>
</h6>
</div>
</asp:HyperLink>
</div>
</section>
最佳答案
代替:
.FiveColumns {
width: 20%;
float: left;
}
尝试这个:
.FiveColumns {
flex: 1;
}
请注意,弹性容器会忽略子元素的
float
属性:3. Flex Containers: the
flex
and inline-flex
display valuesfloat
和clear
对弹性项目没有影响,也请不要使它失去作用。