Столкнулся с такой проблемой как перенос блоков на новую строку. Выровнял их в строку при помощи команды float: left;
Нужно их разбить на группы, по 3 в строку.
Как рациональнее всего сделать переход на новую строку, а то добавлять кучу <br>
как-то не красиво?
Выглядит всё на данный момент вот так:
div.image1 {
float: left;
margin-left: 5px;
}
div.image2 {
float: left;
margin-left: 5px;
}
div.image3 {
float: left;
margin-left: 5px;
}
<p>Pick materials</p>
<div class="color-params" id="col-params" style="display: block;">
<p> Choose a color </p>
<div class="image1">
<div id="image001">
<img src="\Users\cruel\Desktop\htmllll\color1.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="col" class="radio" id="radio-001" value="001"> "color1"
</p>
</div>
<div class="image1">
<div id="image002">
<img src="\Users\cruel\Desktop\htmllll\color2.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="col" class="radio" id="radio-002" value="002"> "color2"
</p>
</div>
<div class="image1">
<div id="image003">
<img src="\Users\cruel\Desktop\htmllll\color3.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="col" class="radio" id="radio-003" value="003"> "color3"
</p>
</div>
</div>
<div class="elbow-params" id="el-params">
<div class="image2">
<div id="image004">
<img src="\Users\cruel\Desktop\htmllll\elbow1.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="elb" class="radio" id="radio-004" value="004"> "elbow1"
</p>
</div>
<div class="image2">
<div id="image005">
<img src="\Users\cruel\Desktop\htmllll\elbow2.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="elb" class="radio" id="radio-005" value="005"> "elbow2"
</p>
</div>
<div class="image2">
<div id="image006">
<img src="\Users\cruel\Desktop\htmllll\elbow3.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="elb" class="radio" id="radio-006" value="006"> "elbow3"
</p>
</div>
<div class="wheel-params" id="whl-params" style="display:block;">
<div class="image3">
<div id="image007">
<img src="\Users\cruel\Desktop\htmllll\wheel1.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="whl" class="radio" id="radio-007" value="007"> "wheel1"
</p>
</div>
<div class="image3">
<div id="image008">
<img src="\Users\cruel\Desktop\htmllll\wheel2.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="whl" class="radio" id="radio-008" value="008"> "wheel2"
</p>
</div>
<div class="image3">
<div id="image009">
<img src="\Users\cruel\Desktop\htmllll\wheel3.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="whl" class="radio" id="radio-009" value="009"> "wheel3"
</p>
</div>