个人中心
gpt4 book ai didi

html - 如何将图片定位为与
元素平行 - HTML 和 CSS

转载 作者：行者123 更新时间：2023-11-28 01:16:01 29 4
gpt4 key购买 nike

大约两个月前，我开始学习 HTML 和 CSS。我刚刚创建了一个我不打算发布的练习网站，至少目前不打算发布。我试图在表单元素旁边(右侧)放置一张黄色 Postik 便条的图片。

不管我做什么，我就是无法让它出现在联系表格的右侧，因为此刻它在表格下方，我需要将它向上移动，使其与表格平行.我可以轻松地将它放在我的联系表格下方，但不能再往上，我需要它的位置 - 基本上位于网页的右侧(它现在所在的位置)，但与表格平行。

请注意，我的整个网站位于屏幕中间(800 像素宽)，类似于 BBC 等网站。这是从 trinket(下面的链接)复制粘贴的代码。

https://trinket.io/html/b369625bd5

非常感谢，我将非常感谢对此的任何帮助。

#Container {
    width:800px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
}

header {
    color: blue;
    font-size: 30pt;
    text-shadow: 16px 8px 16px grey;
}

#MainBody {
    margin-top: 15px;
    margin-bottom: 15px;
}

form {
    
}

img {
    display: block;
    height: auto;
    width: 20%;
    float: right;
}

.Sidebar {
    background-color: #f2f2f2;
}

nav {
    text-align: center;
    background-color: #f2f2f2;
    padding: 10px;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

a:link, a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    text-decoration-color: #000;
}

a:active {
    text-decoration: underline;
}

#button1, #button2, #button3, #button4, #button5 {
    background-color: #4CAF50;
    box-shadow: 1px 2px #888888;
}

#button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover {
    background-color: white;
}

#button1a, #button2a, #button3a, #button4a {
    background-color: #4BC402;
    box-shadow: 1px 2px #888888;
}

#button1a:hover, #button2a:hover, #button3a:hover, #button4a:hover {
    background-color: white;
}

footer {
    text-align: center;
    margin-top: 5px;
}
<!DOCTYPE html>
<html lang="en-GB">
    <head>
        <meta charset="utf-8" />
        <title>The World's Strangest Facts</title>
    </head>
    <body>
        <!-- Container Starts Here -->
        <div id="Container">
            <!-- Header Section Starts Here -->
            <header>
                <div id="HeaderOne">
                    <h1 style="text-align: center">StrangeNET</h1>
                </div>
                <div id="HeaderTwo">
                    <h3 style="text-align: center">The World's Strangest Facts</h3>
                </div>
            </header>
            <!-- Header Section Ends Here -->
            <hr />
    
            <!-- Nav Menu Starts Here -->
            <nav>
                <ul>
                    <button id="button1a"><li><a href="#">Home</a></li></button>
                    <button id="button2a"><li><a href="#">About</a></li></button>
                    <button id="button3a"><li><a href="#">Contact</a></li></button>
                    <button id="button4a"><li><a href="#">Disclaimer</a></li></button>
                </ul>
                <ul>
                    <button id="button1"><li><a href="#">Sociopolitical</a></li></button>
                    <button id="button2"><li><a href="#">History</a></li></button>
                    <button id="button3"><li><a href="#">Earth & Nature</a></li></button>
                    <button id="button4"><li><a href="#">The Cosmos</a></li></button>
                    <button id="button5"><li><a href="#">Technology</a></li></button>
                </ul>
            </nav>
            <!-- Nav Menu Ends Here -->
            <hr />
    
            <!-- Main Content Starts Here -->
            <div id="MainBody">
                <p>
                    Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea. 
                    No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing. 
                    Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea. 
                    No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing. 
                    Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea. 
                    No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing. 
                    Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri. 
                </p>
                <p>
                    Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea. 
                    No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing. 
                    Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea. 
                    No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing. 
                    Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
                </p>
            </div>
            <!-- Main Content Ends Here -->
            <hr />
    
            <!-- Contact Form Starts Here -->
            <aside>
                <div class="Sidebar">
                    <h3>Contact Me</h3>
                    <form>
                        <input name="name" type="text" /><br />
                        <input name="email" type="email" /><br />
                        <textarea name="message"></textarea><br />
                        <input type="submit" value="Send" class="submit" />
                    </form>
                    <img src="contactme.jpg" alt="Postik Note">
          
                    <!-- Relative image address changed for Trinket only -->
                </div>
            </aside>
            <!-- Contact Form Ends Here -->
            <hr />
    
            <!-- Footer Starts Here -->
            <footer>
                <span>Mathew | 2018 ©</span>
            </footer>
            <!-- Footer Ends Here -->
        </div>
        <!-- Container Ends Here -->
    </body>
</html>

最佳答案 

#Container {
      width:800px;
      height:auto;
      margin-left:auto;
      margin-right:auto;
}

header {
    color: blue;
    font-size: 30pt;
    text-shadow: 16px 8px 16px grey;
}

#MainBody {
      margin-top: 15px;
      margin-bottom: 15px;
}

form {
  float:left;
}

img {
      height: auto;
      width: 20%;
      float:right;
	  display: block;
}

.Sidebar {
      background-color: #f2f2f2;
      display:inline-block;
      width:100%;
}

nav {
    text-align: center;
    background-color: #f2f2f2;
    padding: 10px;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

a:link, a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
      text-decoration-color: #000;
}

a:active {
    text-decoration: underline;
}

#button1, #button2, #button3, #button4, #button5 {
    background-color: #4CAF50;
    box-shadow: 1px 2px #888888;
}

#button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover {
    background-color: white;

}

#button1a, #button2a, #button3a, #button4a {
    background-color: #4BC402;
    box-shadow: 1px 2px #888888;
}

#button1a:hover, #button2a:hover, #button3a:hover, #button4a:hover {
    background-color: white;
}

footer {
      text-align: center;
      margin-top: 5px;
}
<body>
<!-- Container Starts Here -->
  <div id="Container">
<!-- Header Section Starts Here -->
  <header>
    <div id="HeaderOne">
      <h1 style="text-align: center">StrangeNET</h1>
    </div>
    <div id="HeaderTwo">
      <h3 style="text-align: center">The World's Strangest Facts</h3>
    </div>
  </header>
<!-- Header Section Ends Here -->
  <hr />

<!-- Nav Menu Starts Here -->
  <nav>
    <ul>
      <button id="button1a"><li><a href="#">Home</a></li></button>
      <button id="button2a"><li><a href="#">About</a></li></button>
      <button id="button3a"><li><a href="#">Contact</a></li></button>
      <button id="button4a"><li><a href="#">Disclaimer</a></li></button>
    </ul>
    <ul>
      <button id="button1"><li><a href="#">Sociopolitical</a></li></button>
      <button id="button2"><li><a href="#">History</a></li></button>
      <button id="button3"><li><a href="#">Earth & Nature</a></li></button>
      <button id="button4"><li><a href="#">The Cosmos</a></li></button>
      <button id="button5"><li><a href="#">Technology</a></li></button>
    </ul>
  </nav>
<!-- Nav Menu Ends Here -->
  <hr />

<!-- Main Content Starts Here -->
  <div id="MainBody">
    <p>Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea. 
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing. 
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
    </p>
    <p>
Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea. 
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing. 
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
    </p>
    <p>
Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea. 
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing. 
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri. 
    </p>
    <p>
Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea. 
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing. 
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
    </p>
    <p>
Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea. 
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing. 
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
    </p>
  </div>
<!-- Main Content Ends Here -->
  <hr />

<!-- Contact Form Starts Here -->
  <aside>
    <div class="Sidebar">
      <h3>Contact Me</h3><br>
      <form>
        <input name="name" type="text" /><br />
        <input name="email" type="email" /><br />
        <textarea name="message"></textarea><br />
        <input type="submit" value="Send" class="submit" />
      </form>
      <img src="contactme.jpg" alt="Postik Note">

      <!-- Relative image address changed for Trinket only -->
    </div>
  </aside>
<!-- Contact Form Ends Here -->
  <hr />

<!-- Footer Starts Here -->
  <footer>
    <span>Mathew J. M. | 2018 ©</span>
  </footer>
<!-- Footer Ends Here -->
  </div>
<!-- Container Ends Here -->
</body>

我对侧边栏样式做了一些更改，从和图像您可以阅读更多关于 float 的信息

基本上，您希望表单元素 float 到其容器 Sidebar 的左侧，并且由于您使用的是 float，所以侧栏样式显示为 inline-block。有很好的解释here关于使用 display:inline-block(你可以删除它看看会发生什么)和 float 。

关于html - 如何将图片定位为与 <form> 元素平行 - HTML 和 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51829113/

29 4 0
文章推荐： javascript - Bootstrap popovers 可以不被销毁吗？
文章推荐： c++ - 在 C++ 中将对象作为参数传递
文章推荐： c++ - 如何解决 C++ 中的 "cppcoreguidelines-pro-type-cstyle-cast"错误？
文章推荐： javascript - 我已经设置了主体，html 元素高度 100% 即使 div 元素高度 100% 也不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com