将 div 内容分成 2 列而不修改 html

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

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

请注意：标题也将是一列（请参阅代码片段），可以用 pseudo-class :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>

将 div 内容分成 2 列而不修改 html

Divide div content into 2 columns without modifying html

html

css

joomla