分格内容分成两列，而无需修改HTML

Question

我使用Joomla和我产生通过.xml配置文件的html代码如下。我已经缩短为例如HTML，但我有大量div（.control-group）的，我想将它们分成2列。

我的问题是，我不能碰的HTML，我可以手动更改的唯一class是myclass。如果有必要，我可以改变这个名字。

我如何可以将2列与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。这将使每个格成一列。

一注：标题也将是一列（见代码段），即可以固定一个伪类: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>