Hola a todos, recurro otra vez a vosotros (se que soy un pesado, lo se...) porque llevo peleandome con este tema mucho tiempo y no encuentro solucion viable al problema, veran, necesito hacer una tabla de items para una supuesta tienda online (solo el front end) y necesito dividir este row en 3 items de manera que queden como en la foto, el que me preocupa es el que ocupa 2 espacios;
http://prntscr.com/7tvyhk
el tema es que luego necesitare aplicar jQuery para que se pueda seleccionar y quede asi;
http://prntscr.com/7tw0g8
uso el sistema de grids de 1140px y por mas que lo intento, me queda asi;
http://prntscr.com/7tw1oa
añadir el carrito, los padding y demas los podre hacer bien para alinear la estructura pero el tema de que la imagen quede alineada a la izquierda y el texto a la derecha con el precio y demas no logro hacerlo. se que luego con el jQuery es un tema de addClass o de toggle, pero se que para aplicarlo tiene que estar reunido en un mismo div y si lo parto en 2 a la hora de seleccionarlo no podria.
mi codigo es asi:
Código HTML:
<div class="container12">
<div class="row">
<div class="column6">
<div>
<img src="img/xe22.jpg" id="xe22" alt="">
</div>
<div>
<p><strong>Fujifilm X-E2 Kit 18-55mm</strong></p>
<br>
<p>Беззеркальная 16.3 Мп 1.5crop.
C обьективом F2.8-4.0 18-55mm
Экран 3” 1 040 000 пикс.
Электронный видоискатель
Металический корпус
Live View с автофокусом
ISO 200-2500
Сьемка Full HD видео 60 кадров/сек
Поддержка карт SD, SDHC, SDXC
WiFi
<br>
<br>
<strong><del> 14 850 000</del></strong>
<hr>
<strong> 8 355 000</strong></p>
</div>
</div>
<div class="column3">
<img src="img/700d.jpg" alt="">
<p><strong>Canon EOS 700D Kit 18-55 IS STM</strong></p>
<br>
<p>Зеркальная, 18 Мп 1.6 crop.
С обьективом F3.5-5.6 18-55mm
Экран 3” сенсорный, поворотный,
Видеоискатель оптический</p>
<hr>
<p><strong> 8 355 000</strong></p>
</div>
<div class="column3">
<img src="img/x100s.jpg" alt="">
<p><strong>Fujifilm X100S</strong></p>
<br>
<p>Компакт-камера, 16.3Мп 1.5 crop, F2.0
35мм, экран 2.8”</p>
<hr>
<p><strong> 12 999 000</strong></p>
</div>
</div>
y el css pues es el sistema de grid de 1140px;
Código HTML:
.container12, .container16 {
margin:0 auto;
padding:0;
position:relative;
width:1140px;
}
.row {
margin-bottom: 20px;
}
.column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12, .column13, .column14, .column15, .column16 {
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
}
ayudita por favor