in custom homepage template images added only in newline (magento 1.9.4)

magento.stackexchange https://magento.stackexchange.com/questions/255964

题

Following is the homepage.phtml 

<html>
<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magento.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magento.com for more information.
 *
 * @category    design
 * @package     rwd_default
 * @copyright   Copyright (c) 2006-2018 Magento, Inc. (http://www.magento.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php
/**
 * Template for Mage_Page_Block_Html
 */
?>

<!DOCTYPE html>

<!--[if lt IE 7 ]> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js"> <!--<![endif]-->

<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>
<div class="wrapper">
    <?php echo $this->getChildHtml('global_notices') ?>
    <div class="page">
        <?php echo $this->getChildHtml('header') ?>
        <div class="main-container col1-layout">
            <div class="main">
                <?php echo $this->getChildHtml('breadcrumbs') ?>
                <div class="col-main">
                    <?php echo $this->getChildHtml('global_messages') ?>
                    <?php echo $this->getChildHtml('content') ?>
                    <img src="http://under10.ca/skin/frontend/rwd/enigma/images/Left_1.jpg" height="225" width="225" />
                    <img src="http://under10.ca/skin/frontend/rwd/enigma/images/Left_1.jpg" height="225" width="225" />
                </div>
            </div>
        </div>
        <?php echo $this->getChildHtml('footer_before') ?>
        <?php echo $this->getChildHtml('footer') ?>
        <?php echo $this->getChildHtml('global_cookie_notice') ?>
        <?php echo $this->getChildHtml('before_body_end') ?>
    </div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>

the following code adds 2 images as desired but on newlines

<img src="http://under10.ca/skin/frontend/rwd/enigma/images/Left_1.jpg" height="225" width="225" />
<img src="http://under10.ca/skin/frontend/rwd/enigma/images/Left_1.jpg" height="225" width="225" />

I want the images to appear next to each other

有帮助吗？

解决方案 

<div class="row">
  <div class="column">
    <img src="img1.jpg" alt="img1" style="width:100%">
  </div>
  <div class="column">
    <img src="img2.jpg" alt="img2" style="width:100%">
  </div>
</div>

css:

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Note : the images src, don't add it like your example (you know that I think), it's instead like this :

<img src="<?php echo $block->getViewFileUrl("images/Left_1.jpg"); ?>" alt="">

Example in JSFIDDLE

Update

This is your images :

<div class="row">
    <div class="column my-images" style="display: inline-block;">
        <img src="http://under10.ca/skin/frontend/rwd/enigma/images/Left_1.jpg" alt="img1" width="225" height="225">
    </div>
    <div class="column my-images" style="display: inline-block;">
    <img src="http://under10.ca/skin/frontend/rwd/enigma/images/Left_1.jpg" alt="img1" width="225" height="225">
</div>

// I added the `my-images` class in <div class="column /*Here*/">

Then add this in your style and compile.

.cms-index-index .main-container .column.my-images {
    display: inline-block;
}

enter image description here

许可以下： CC-BY-SA 和 归因
scroll top