html - 在不修改html的情况下将div内容分成2列

Question

我正在使用 Joomla 并通过 .xml 配置文件生成以下 html 代码。我已经缩短了示例的 html，但我有大量的 div (.control-group)，我想将它们分成 2 列。

我遇到的问题是我无法触摸 html，我唯一可以手动更改的 class 是 myclass。如果需要，我可以更改此名称。

如何将 div 和 id="my-form" 分成两列？ (例如每列有 2 个 class="control-group")。

这是我的 .xml 文件生成的 html:

<div id="my-form" class="tab-pane active">
    <div class="control-group">
        <div class="control-label">
            <span class="spacer"><span class="before"></span><span><label id="jform_spacer1-lbl" class=""><b>Tittle 1</b></label></span><span class="after"></span></span>
        </div>
        <div class="controls">
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-name-lbl" for="your-name" class="hasTooltip" title="" data-original-title="<strong>Your name</strong>">Your name</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-name]" id="your-name" value="" class="myclass">                             
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-lastname-lbl" for="your-lastname" class="hasTooltip" title="" data-original-title="<strong>Your lastname</strong>">Your lastname</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-lastname]" id="your-lastname" value="" class="myclass">                             
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-age-lbl" for="your-age" class="hasTooltip" title="" data-original-title="<strong>Your age</strong>">Your age</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-age]" id="your-age" value="" class="myclass">                               
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-city-lbl" for="your-city" class="hasTooltip" title="" data-original-title="<strong>Your city</strong>">Your city</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-city]" id="your-city" value="" class="myclass">                             
        </div>
    </div>
</div>

Answer 1

将宽度的一半 (50%) 放置到每个 control-group div 中，并使它们显示为 inline-block 或应用 float。这将使每个 div 成为一列。

请注意:标题也将是一列(请参阅代码片段)，可以使用伪类 :first-child 进行修复。

例子:

#my-form {
	width: 100%;
}
#my-form .control-group {
	display: inline-block;
	vertical-align: top;
	width: 49%; /* because of the box-sizing, but you can fix this */
}

<div id="my-form" class="tab-pane active">
    <div class="control-group">
        <div class="control-label">
            <span class="spacer"><span class="before"></span><span><label id="jform_spacer1-lbl" class=""><b>Tittle 1</b></label></span><span class="after"></span></span>
        </div>
        <div class="controls">
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-name-lbl" for="your-name" class="hasTooltip" title="" data-original-title="<strong>Your name</strong>">Your name</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-name]" id="your-name" value="" class="myclass">                             
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-lastname-lbl" for="your-lastname" class="hasTooltip" title="" data-original-title="<strong>Your lastname</strong>">Your lastname</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-lastname]" id="your-lastname" value="" class="myclass">                             
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-age-lbl" for="your-age" class="hasTooltip" title="" data-original-title="<strong>Your age</strong>">Your age</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-age]" id="your-age" value="" class="myclass">                               
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-city-lbl" for="your-city" class="hasTooltip" title="" data-original-title="<strong>Your city</strong>">Your city</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-city]" id="your-city" value="" class="myclass">                             
        </div>
    </div>
</div>