Flexbox布局。无法将相框的宽度设置为

一直在浏览我的问题解决方案的网络，所有柔性盒的宽度相同，但没有运气。所以我试着在这里问你。Flexbox布局。无法将相框的宽度设置为

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

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

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

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

来源

2017-09-15 Terje Nygård

所有你需要的是柔性物品上的flex：1。 https://jsfiddle.net/7pwar5v6/2/ –

@Michael_B：试过了，没有工作......试着为自己:) 我注意到很多问题被标记为重复很多次......而70％在这种情况下......它更像是一个普通的......“原始CSS混乱了flexbox-layout，我无法弄清楚我的情况是什么原因...... 我使用默认的flexbox“模板”进行了试用..工作，我缩小了CSS，剥离了样式等等......成功..但是......我需要的正是我所做的，而且无法对它进行排序所以因此..重复的“技术问题”是的..但没有解决方案.. –

我测试了你的代码，我也测试了我的解决方案，它的工作原理，请参阅我的评论中的演示。 –

我觉得这两个设置和擦除从.foodbox的width应该做的伎俩，因为.foodbox元素不柔性项目，但柔性项的孩子：

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

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

来源

2017-09-15 22:38:06 Johannes

感谢3个很好的答案！尽管所有这些解决了问题，但我发现@Johannes解决方案最简单，无需为食品盒元素本身设置指定的宽度...... :)谢谢！ –

你可以添加宽度为ASP：LinkButton的元素，是这样的：

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

来源

2017-09-15 22:18:25

这似乎与溢出将在 '食品盒' 固定宽度解决：隐。我与“破字”废除和中心内容：

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

来源

2017-09-15 22:21:46 zornfett

谢谢@zornfett ..应该可能已经注意到了，但试图远离指定一个恒定的宽度食品盒:)谢谢，虽然！ –

Flexbox布局。无法将相框的宽度设置为

回答

相关问题