Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/07/2015, 14:00
Avatar de alexkurban
alexkurban
 
Fecha de Ingreso: mayo-2015
Ubicación: Minsk
Mensajes: 48
Antigüedad: 9 años, 6 meses
Puntos: 4
Como hacer esto con los estilos css

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