Question

我是HTML，CSS和JavaScript的新手。我使用了一个标记来选择作者，一旦选择了作者，它将显示与作者姓名相对应的图像，但是该图像将显示在所选内容的旁边，而不是下方。

我使用了align =“ top”，但这不起作用 var getAuthor = document.getElementById（“ authorImage”）; 函数myAuthor（AuthorIndex） { getAuthor.style.display =“”; 如果（AuthorIndex == 1） { getAuthor.src =“ Stephen.jpg”; getAuthor.style.width =“ 300px”; getAuthor.style.height =“ 300px”; } }

我希望图像显示在标签下方，但显示在旁边。我如何解决它？

Answer 1

您可以为图像设置display：block

img {
    display: block;
    padding-top: 5px;
}

var getAuthor =  document.getElementById("authorImage");

        function myAuthor(AuthorIndex)
        {
            getAuthor.style.display="";
            if (AuthorIndex == 1) 
            {
                getAuthor.src = "Stephen.jpg";
                getAuthor.style.width = "300px";
                getAuthor.style.height = "300px";

            }

}

img {
    display: block;
    padding-top: 5px;
}

<select id="selectAuthor" onchange="myAuthor(this.value)">
                <option value="0" onclick="">Please select an Author</option>
                <option value="1">Stephen King</option>
                <option value="2">George R. R. Martin</option>
                <option value="3">Mark Twain</option>
        </select>

        <img src="" id="authorImage" width="300px" height="300px" align="top"/>

Answer 2

使用<br/>：

var getAuthor =  document.getElementById("authorImage");

function myAuthor(AuthorIndex)
{
  getAuthor.style.display="";
  if (AuthorIndex == 1) 
  {
    getAuthor.src = "Stephen.jpg";
    getAuthor.style.width = "300px";
    getAuthor.style.height = "300px";

  }
}

<select id="selectAuthor" onchange="myAuthor(this.value)">
  <option value="0" onclick="">Please select an Author</option>
  <option value="1">Stephen King</option>
  <option value="2">George R. R. Martin</option>
  <option value="3">Mark Twain</option>
</select>

<br/>

<img src="" id="authorImage" width="300px" height="300px" align="top"/>

将元素编号包装在具有相同图像宽度的容器中：

var getAuthor =  document.getElementById("authorImage");

function myAuthor(AuthorIndex)
{
  getAuthor.style.display="";
  if (AuthorIndex == 1) 
  {
    getAuthor.src = "Stephen.jpg";
    getAuthor.style.width = "300px";
    getAuthor.style.height = "300px";

  }
}

.container {
  width: 300px;
}

<div class="container">
  <select id="selectAuthor" onchange="myAuthor(this.value)">
    <option value="0" onclick="">Please select an Author</option>
    <option value="1">Stephen King</option>
    <option value="2">George R. R. Martin</option>
    <option value="3">Mark Twain</option>
  </select>

  <img src="" id="authorImage" width="300px" height="300px" align="top"/>

</div>

提供图片display: block属性：

var getAuthor =  document.getElementById("authorImage");

function myAuthor(AuthorIndex)
{
  getAuthor.style.display="";
  if (AuthorIndex == 1) 
  {
    getAuthor.src = "Stephen.jpg";
    getAuthor.style.width = "300px";
    getAuthor.style.height = "300px";

  }
}

img { display: block; }

<select id="selectAuthor" onchange="myAuthor(this.value)">
  <option value="0" onclick="">Please select an Author</option>
  <option value="1">Stephen King</option>
  <option value="2">George R. R. Martin</option>
  <option value="3">Mark Twain</option>
</select>

<img src="" id="authorImage" width="300px" height="300px" align="top"/>

如何在<select>标签下面对齐图片？

2 个答案: