Разделите содержимое div на 2 столбца без изменения HTML

Question

Я использую Joomla и создаю следующий HTML-код через файл конфигурации .xml.Я сократил HTML для примера, но у меня есть большое количество div (.control-group), и я хотел бы разделить их на 2 столбца.

У меня проблема в том, что я не могу коснутьсяHTML, единственное class, которое я могу изменить вручную, это myclass.Я могу изменить это имя, если это необходимо.

Как я могу разделить div на id="my-form" на 2 столбца?(например, с 2 class="control-group" в каждом столбце).

Вот HTML-код, сгенерированный моим XML-файлом:

<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.

* 1008.*Пример:

#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>