Question

一直在浏览网络以解决我的问题，让所有的Flexbox都有相同的宽度，但没有运气。所以我试着在这里问你。

正如您所看到的，如果描述很长，则框也会更宽。一直在玩word-wrap: break-word;而没有任何运气。

请参阅下面的代码段或jsfiddle。

＆＃13;

.buttons {
  display: flex;
}

.buttons>a {
  margin: 0 5px;
}

.food-box {
  flex: 1;
  position: relative;
  background-color: white;
  min-height: 300px;
  background-color: #ffffff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.10);
  border-color: #d3e0e9;
  border: 1px solid #b3c9e5;
  word-wrap: break-word;
  margin: 0 !important;
  padding: 0 !important;
}

.food-box .food-box-image {
  position: absolute top: 0 left: 0;
  background-image: url('https://images.pexels.com/photos/461198/pexels-photo-461198.jpeg?h=350&auto=compress&cs=tinysrgb');
  background-size: cover;
  width: 100%;
  min-height: 150px;
  background-color: red;
}

.food-box .food-box-content {
  position: absolute bottom: 0 left: 0;
  word-wrap: break-word;
  width: 100%;
  min-height: 150px;
  background-color: #e25822;
  color: #fff;
  font-size: 70%;
  padding-top: 60px;
  padding-left: 5px;
  padding-right: 5px;
}

.food-box .food-box-badge {
  display: table;
  background-color: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  font-size: 12px;
  color: #000000;
  text-align: center;
  -webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  border-color: #d3e0e9;
  border: 1px solid #b3c9e5;
  padding-left: 10px;
  padding-right: 10px;
}

.food-box .food-box-badge span {
  color: #666;
  display: table-cell;
  vertical-align: middle;
  line-height: 1.2em;
  word-wrap: break-word;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="buttons">
  <asp:LinkButton runat="server" id="lnkNewTapas" OnClick="lnkNewTapas_OnClick">
    <div class="food-box">
      <div class="food-box-image" runat="server" id="foodBoxBGTapas">
      </div>
      <div class="food-box-badge">
        <span>Tapas</span>
      </div>
      <div class="food-box-content">
        Velsmakende og orientalske tapasretter!
      </div>
    </div>
  </asp:LinkButton>
  <asp:LinkButton runat="server" id="lnkNavKoldtbord" OnClick="lnkNavKoldtbord_OnClick">
    <div class="food-box">
      <div class="food-box-image" runat="server" id="foodBoxBGKoldtbord">
      </div>
      <div class="food-box-badge">
        <span>Koldtbord</span>
      </div>
      <div class="food-box-content">
        Velg mellom våre to smakfulle koldtbordvarianter...
      </div>
    </div>
  </asp:LinkButton>
  <asp:LinkButton runat="server" id="lnkPasmurt" OnClick="lnkPasmurt_OnClick">
    <div class="food-box">
      <div class="food-box-image" runat="server" id="foodBoxBGPasmurt">
      </div>
      <div class="food-box-badge">
        <span>Påsmurt</span>
      </div>
      <div class="food-box-content">
        Velg fritt i vårt store utvalg av baguetter, snitter, rundstykker.
      </div>
    </div>
  </asp:LinkButton>
  <asp:LinkButton runat="server" id="lnkNewMed" OnClick="lnkNewMed_OnClick">
    <div class="food-box">
      <div class="food-box-image" runat="server" id="foodBoxBGMed">
      </div>
      <div class="food-box-badge">
        <span>Middelhavs buffét</span>
      </div>
      <div class="food-box-content">
        Orientalske matretter med spennende smaker!
      </div>
    </div>
  </asp:LinkButton>
  <asp:LinkButton runat="server" id="lnkNewVarmmat" OnClick="lnkNewVarmmat_OnClick">
    <div class="food-box">
      <div class="food-box-image" runat="server" id="foodBoxBGVarmmat">
      </div>
      <div class="food-box-badge">
        <span>Varmmat</span>
      </div>
      <div class="food-box-content">
        Et stort utvalg av varmmatretter!
      </div>
    </div>
  </asp:LinkButton>
</div>

＆＃13;

Answer 1

我认为这两个设置和从width删除.foodbox应该可以解决问题，因为.foodbox元素不是灵活项目，但是柔性项＆＃39;小孩：

.buttons > * {
  width: 20%;
}
.buttons > * > *{
  width: 100%;
  text-align: center;
}

https://jsfiddle.net/yuwhpgrn/2/

Answer 2

您可以为asp：LinkButton元素添加宽度，例如：

[runat]{
   width: calc(100% / 5);
}

Answer 3

这似乎是通过在“食物盒”上应用固定宽度来解决的。溢出：隐藏。我取消了“打破”字样＆＃39;并集中内容：

.buttons {
  display: flex;
}

.buttons > a {
  margin: 0 5px;
}

.food-box {
  flex: 1;
width: 200px;
overflow: hidden;
  position: relative;
  background-color: white;
  min-height: 300px;
  background-color: #ffffff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.10);
  border-color: #d3e0e9;
  border: 1px solid #b3c9e5;
  word-wrap: break-word;
  margin: 0 !important;
  padding: 0 !important;
}

.food-box .food-box-image {
  position: absolute top: 0 left: 0;
  background-image: url('https://images.pexels.com/photos/461198/pexels-photo-461198.jpeg?h=350&auto=compress&cs=tinysrgb');
  background-size: cover;
  width: 100%;
  min-height: 150px;
  background-color: red;
}

.food-box .food-box-content {
  position: absolute bottom: 0 left: 0;
/* word-wrap: break-word; */
text-align: center;
  width: 100%;
  min-height: 150px;
  background-color: #e25822;
  color: #fff;
  font-size: 70%;
  padding-top: 60px;
  padding-left: 5px;
  padding-right: 5px;
}

.food-box .food-box-badge {
  display: table;
  background-color: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  font-size: 12px;
  color: #000000;
  text-align: center;
  -webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  border-color: #d3e0e9;
  border: 1px solid #b3c9e5;
  padding-left: 10px;
  padding-right: 10px;
}

.food-box .food-box-badge span {
  color: #666;
  display: table-cell;
  vertical-align: middle;
  line-height: 1.2em;
  word-wrap: break-word;
}

https://jsfiddle.net/zornfett/8r4L2c3r/

Flexbox布局。无法将盒子放到相同的宽度

3 个答案: