Question

我有这个结构：

<ul class="wrap-accordionblk">
<li class="accordionblk-item">
<div class="accordionblk-header">
    <div class="row-fluid">
        <div class="infoblk">
            <label>ID SESSIONE</label><strong>MM-00120853</strong>
        </div>
        <div class="infoblk">
            <label>DATA</label>31/01/16</div>
        <div class="infoblk">
            <label>NOME SESSIONE</label>ferrarif-2B0000118188</div>
        <div class="infoblk">
            <label>ANNO STAGIONE</label>AI 2015</div>
        <div class="infoblk">
            <label>TIPO ORDINE</label>2B</div>
        <div class="infoblk">
            <label>N° CAPI</label>1</div>
        <div class="infoblk">
            <label>VALORE </label>€ 94,92</div>
        <div class="infoblk">
        </div>

        </div>
</div>  
</li>

<li class="accordionblk-item">
    <div class="accordionblk-header">
        <div class="row-fluid">
            <div class="infoblk">
                <label>ID SESSIONE</label><strong>MM-00120854</strong>
            </div>
            <div class="infoblk">
                <label>DATA</label>29/01/16</div>
            <div class="infoblk">
                <label>NOME SESSIONE</label>ferrarif-2B0000118030</div>
            <div class="infoblk">
                <label>ANNO STAGIONE</label>AI 2015</div>
            <div class="infoblk">
                <label>TIPO ORDINE</label>2B</div>
            <div class="infoblk">
                <label>N° CAPI</label>1</div>
            <div class="infoblk">
                <label>VALORE </label>€ 94,92</div>
            <div class="infoblk">
            </div>
            </div>
    </div>  
</li>
</ul>

我遇到的问题是，如果会话名称（NOME SESSIONE）具有不同数量的字符，我的网格列未对齐。你可以在这个jsfiddle here中看到结果。

如果字符串具有不同数量的字符，我如何修改css以使列彼此对齐？

Answer 1

如果你真的不能使用表格，那么为每个列设置宽度给它们额外的css类？或者将每列div放在一个外部div中，使它们与较大内部的宽度相匹配。

<div class="column1">
    <div class="infoblk"></div>
    <div class="infoblk"></div>
</div>

Answer 2

增加宽度：14.25％;上课.infoblk解决了这个问题。你有没有理由不想指定宽度？

.infoblk{
  width: 14.25%;
}

将div与网格中的列表元素对齐

2 个答案: