Bir yan resim ve diğer yan içeriğin html ve css'i nasıl işlenir

Question

Projede çalışıyorum ve tasarımımda bir satır var ve ilk sütunta görüntü var ve ikinci sütunda content.in var Bir sonraki satırın içeriği ilk ve daha sonra görüntü için bir col.I de tasarım görüntüsünü here nasıl ele aldım.Geri çekişmesi itme kalıplarını denedim ama şaşkınım bunu kullanabilirim, eğer bunu kullanırsam nasıl olacak cevap vermek

<div class="hundred-percent-width"> 
           <div class="ad-col-row ad-odd-row ad-margin-bottom-50"> 
            <div class="col-xs-7 col-sm-7 col-md-6 col-lg-7"> 
             <div class="feature-box-thumb border-right"> 
             <img src="<?php echo get_template_directory_uri(); ?>/images/shop-v2-1.jpg" alt="feature-block" width="1047" height="596" /></div> 
            </div> 
            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"> 
             <div class="ad-pad-sq"> 
              <div class="ad-sec-title ad-uline-left ad-margin-bottom-20"> 
               <h4>VEHICLE NAME J33D3</h4> 
              </div> 
              <!--ad-sec-title closed--> 
              <div class="ad-sec-content ad-margin-bottom-20"> 
               <span class="bold-heading">features</span> 
               <ul class="regular-text ad-margin-left-30"> 
                <li> 
                 <span>Model: JVC-2255L</span> 
                </li> 
                <li> 
                 <span>Brand: JVC Inc.</span> 
                </li> 
                <li> 
                 <span> Capecity : 200tn</span> 
                </li> 
                <li> 
                 <span> Power: 3000Hp</span> 
                </li> 
                <li> 
                 <span> Engine: v8</span> 
                </li> 
                <li> 
                 <span> Average: 2kmpl</span> 
                </li> 
                <li> 
                 <span> Services: world wide</span> 
                </li> 
               </ul> 
              </div> 
              <!--ad-sec-content--> 
              <div class="ad-sec-content ad-margin-bottom-20"> 
               <span class="bold-heading">Description:</span> 
               <p>We will assign a project manager, field superintendent, engineer and other staff members as required to effectively manage the construction process.</p> 
              </div> 
              <!--ad-sec-content--> 
              <div class=""> 
               <div class="ad-left-float ad-margin-right"> 
                <a class="button ad-download-link btn-small" href="#/"><i class="fa fa-download button__icon"></i><span><i style="margin-right:20px;" class="fa fa-file-pdf-o"></i>DOWNLOAD Full brochure</span></a> 
               </div> 
               <!--ad-grey-bdr lcosed--> 
               <div class="ad-left-float btn-xs"> 
                <a href="#/" class="button button-by-default btn-small">GET A QUOTE</a> 
               </div> 
               <!--ad-red-btn closed--> 
              </div> 
             </div> 
             <!--vehicle-content closed--> 
            </div> 
           </div> 
           <!--ad-col-row-closed--> 
          </div> 
          <!--hundred-percent-width closed--> 
          <div class="hundred-percent-width"> 
           <div class="ad-col-row ad-even-row ad-margin-bottom-50"> 
            <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 interchange-first"> 
             <div class="feature-box-thumb border-left"><img src="<?php echo get_template_directory_uri(); ?>/images/shop-v2-2.jpg" alt="feature-block" width="1047" height="596" /></div> 
            </div> 
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-lg-offset-1 interchange-second"> 
             <div class="ad-pad-sq"> 
              <div class="ad-sec-title ad-uline-left ad-margin-bottom-20"> 
               <h4>VEHICLE NAME J33D3</h4> 
              </div> 
              <!--ad-sec-title closed--> 
              <div class="ad-sec-content ad-margin-bottom-20"> 
               <span class="bold-heading">features</span> 
               <ul class="regular-text ad-margin-left-30"> 
                <li> 
                 <span>Model: JVC-2255L</span> 
                </li> 
                <li> 
                 <span>Brand: JVC Inc.</span> 
                </li> 
                <li> 
                 <span> Capecity : 200tn</span> 
                </li> 
                <li> 
                 <span> Power: 3000Hp</span> 
                </li> 
                <li> 
                 <span> Engine: v8</span> 
                </li> 
                <li> 
                 <span> Average: 2kmpl</span> 
                </li> 
                <li> 
                 <span> Services: world wide</span> 
                </li> 
               </ul> 
              </div> 
              <!--ad-sec-content--> 
              <div class="ad-sec-content ad-margin-bottom-20"> 
               <span class="bold-heading">Description:</span> 
               <p>We will assign a project manager, field superintendent, engineer and other staff members as required to effectively manage the construction process.</p> 
              </div> 
              <!--ad-sec-content--> 
              <div class=""> 
               <div class="ad-left-float ad-margin-right"> 
                <a class="button ad-download-link btn-small" href="#/"><i class="fa fa-download button__icon"></i><span><i style="margin-right:20px;" class="fa fa-file-pdf-o"></i>DOWNLOAD Full brochure</span></a> 
               </div> 
               <!--ad-grey-bdr lcosed--> 
               <div class="ad-left-float btn-xs"> 
                <a href="#/" class="button button-by-default btn-small">GET A QUOTE</a> 
               </div> 
               <!--ad-red-btn closed--> 
              </div> 
             </div> 
             <!--vehicle-content closed--> 
            </div> 
            <!--vehicle-content closed--> 
           </div> 
          </div> 
          <!--hundred-percent-width closed--> 

          <div class="hundred-percent-width"> 
           <div class="ad-col-row ad-odd-row ad-margin-bottom-50"> 
            <div class="col-xs-7 col-sm-7 col-md-6 col-lg-7"> 
             <div class="feature-box-thumb border-right"> <img src="<?php echo get_template_directory_uri(); ?>/images/shop-v2-1.jpg" alt="feature-block" width="1047" height="596" /></div> 
            </div> 
            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"> 
             <div class="ad-pad-sq"> 
              <div class="ad-sec-title ad-uline-left ad-margin-bottom-20"> 
               <h4>VEHICLE NAME J33D3</h4> 
              </div> 
              <!--ad-sec-title closed--> 
              <div class="ad-sec-content ad-margin-bottom-20"> 
               <span class="bold-heading">features</span> 
               <ul class="regular-text ad-margin-left-30"> 
                <li> 
                 <span>Model: JVC-2255L</span> 
                </li> 
                <li> 
                 <span>Brand: JVC Inc.</span> 
                </li> 
                <li> 
                 <span> Capecity : 200tn</span> 
                </li> 
                <li> 
                 <span> Power: 3000Hp</span> 
                </li> 
                <li> 
                 <span> Engine: v8</span> 
                </li> 
                <li> 
                 <span> Average: 2kmpl</span> 
                </li> 
                <li> 
                 <span> Services: world wide</span> 
                </li> 
               </ul> 
              </div> 
              <!--ad-sec-content--> 
              <div class="ad-sec-content ad-margin-bottom-20"> 
               <span class="bold-heading">Description:</span> 
               <p>We will assign a project manager, field superintendent, engineer and other staff members as required to effectively manage the construction process.</p> 
              </div> 
              <!--ad-sec-content--> 
              <div class=""> 
               <div class="ad-left-float ad-margin-right"> 
                <a class="button ad-download-link btn-small" href="#/"><i class="fa fa-download button__icon"></i><span><i style="margin-right:20px;" class="fa fa-file-pdf-o"></i>DOWNLOAD Full brochure</span></a> 
               </div> 
               <!--ad-grey-bdr lcosed--> 
               <div class="ad-left-float btn-xs"> 
                <a href="#/" class="button button-by-default btn-small">GET A QUOTE</a> 
               </div> 
               <!--ad-red-btn closed--> 
              </div> 
             </div> 
             <!--vehicle-content closed--> 
            </div> 
           </div> 
           <!--ad-col-row-closed--> 
          </div> 
          <!--hundred-percent-width closed-- 

Answer 1

burada varsayımların bir çok çalışma

, ancak içerik dinamiktir söylediğinden beri, bu yardımcı olur:

<?php 
//Assuming you have a table (let's call it "posts") with at least the following 3 fields : id , img_name , content 
//Assuming you have some sort of DB connector (I'll call it $dbc) 
//This is just a general example, adapt it to your own mysql and php 

$q = 'SELECT * FROM posts ORDER by id'; 
$r = mysqli_query($dbc, $q); 
$i = 0; 

if(mysqli_num_rows($r) > 0){ 
while($row = mysqli_fetch_assoc($r)){ 

if ($i % 2 == 0) { ?> 

    <div style="width: 60%; float: left;" > <img src="path_on_your_host/<?php echo $row['img_name']; ?>" ></div> 
    <div style="width: 30%; position: relative"> <p> <?php echo $row['content']; ?></p></div> 
    <?php 
} else { ?> 

    <div style="width: 30%; float: left;"> <p> <?php echo $row['content']; ?></p></div> 
    <div style="width: 60%; position: relative" > <img src="path_on_your_host/<?php echo $row['img_name']; ?>" ></div> 
    <? 
} 

$i++; 
} 
} 

?> 

bazı hatalar içermesi code..possible test etmedi ama fikir tamamdır.