javascript - 移动图像和文本 - Javascript + html

Question

我有一个包含一些图像和文本的 HTML 页面，我被要求仅使用 javascript 重新开发它。到目前为止，我已经设法从两边翻转图像和文本，放入新的文本和标题。

我遇到的问题是图像歪斜，看起来不对。如何将图像插入以使文本和图像本身对齐。

HTML

<div class="article">
            <div id="myTills">
                <h3 id="headingTwo">About the Product</h3>
                <p id="paragraphTwo">
                    TigerTurf artificial chipping lawns and Golf Greens provide superior quality and ball roll. You can choose which type of synthetic grass you require for areas such as rough and tee boxes. Installing your practice green in your home Garden or business, will allow you to improve your game in your spare time. Your Golf Green will be smooth, durable and realistic to play on. If you have any more questions about design and installation, contact us anytime.
                </p>
            </div>
            <img id="pic4" src="images/nature-place-photo.png" alt="">
        </div>  

Javascript

var x = document.getElementById("pic4");
x.setAttribute("src", "../images/water_image2.png");
x.style.cssFloat = 'left';
x.style.width = "356px";
x.style.height = "250px";

var y = document.getElementById("headingTwo");
y.innerText = "Tills"
y.style.textAlign = "left"; 

var x = document.getElementById("paragraphTwo");
x.innerText = "Contains new text"
x.style.textAlign = "left";

var y = document.getElementById("myTills");
y.style.cssFloat = "right";

Answer 1

我对你的代码做了一些修改。在您的 HTML 中，我切换了 img 和 #myTills 的位置，因为父元素的 display 是 table。由于父元素的 display 是 table，您可能希望 #myTills 的显示是 table-cell因此您可以使用 vertical-align: middle 使文本垂直居中对齐。

HTML

<div class="article">
    <img id="pic4" src="images/nature-place-photo.png" alt="">
    <div id="myTills">
        <h3 id="headingTwo">About the Product</h3>
        <p id="paragraphTwo">
            TigerTurf artificial chipping lawns and Golf Greens provide superior quality and ball roll. You can choose which type of synthetic grass you require for areas such as rough and tee boxes. Installing your practice green in your home Garden or business, will allow you to improve your game in your spare time. Your Golf Green will be smooth, durable and realistic to play on. If you have any more questions about design and installation, contact us anytime.
        </p>
    </div>
</div>

Javascript

var article = document.querySelector('.article');
article.style.display = 'table';

var x = document.getElementById("pic4");
x.style.width = "356px";
x.style.height = "250px";
x.style.display = "table-cell";

var y = document.getElementById("headingTwo");
y.innerText = "Tills"
y.style.textAlign = "left";

var x = document.getElementById("paragraphTwo");
x.innerText = "Contains new text"
x.style.textAlign = "left";

var y = document.getElementById("myTills");
y.style.display = "table-cell";
y.style.height = "250px";
y.style.width = "100%";
y.style.verticalAlign = "middle";

这就是您真正想要实现的目标吗？