Question

我在div内跨越，它将分成3个垂直对齐的行。它在高分辨率浏览器中正常工作，但是当我调整浏览器大小时，它会缩短。你可以调整jsfiddle窗口的大小，你会看到我在说什么。

我该如何解决？

<div class="postPrevContent cal">
                <span>იანვარი</span>
                <span>თებერვალი</span>
                <span>მარტი</span>
                <span>აპრილი</span>
                <span>მაისი</span>
                <span>ივნისი</span>
                <span>ივლისი</span>
                <span>აგვისტო</span>
                <span>სექტემბერი</span>
                <span>ოქტომბერი</span>
                <span>ნოემბერი</span>
                <span>დეკემბერი</span>

            </div>

Answer 1

添加一个最小宽度：100px的在你的.cal span css类

Answer 2

您可以在CSS中使用媒体查询，当页面宽度低于500px时，这将使其分为2列而不是3列：

@media (max-width: 500px){
    .cal span {
        width: 50%;
    }
}

http://jsfiddle.net/hqu6t0en/1/

然后你可以再次对250px的宽度进行相同的处理，并使宽度为100％，以便在更小的情况下制作一列。或者将最小宽度应用于.col以阻止它低于250px但保持2列

@media (max-width: 250px){
    .cal span {
        width: 100%;
    }
}

或者

.cal {
    margin: 10px 0;
    min-width: 250px;
}

Answer 3

将span更改为div，样式float左和宽度（百分比）（corse in * .css和class is beather），设置父div的min-width。 150，如果您认为文本的最大宽度为50px。

<div style="min-width: 150px; max-width: 800px;">
        <div style=" width: 33%;float: left;">AAAAAAAA</div>
        <div style=" width: 33%;float: left;">BBBBBBBB</div>
        <div style=" width: 33%;float: left;">CCCCCCCCC</div>
        <div style=" width: 33%;float: left;">AAAAAAAAAA</div>      
        <div style=" width: 33%;float: left;">BBBBBBBBBBBBB</div>
        <div style=" width: 33%;float: left;">CCCCCCCCCCCC</div>
        </div>

PS。设置大显示的最大宽度。在div中设置中心文本。

窗口调整大小的垂直对齐跨度转到另一行

3 个答案: