首页 > 编程入门 文章详情

如何将我的图像放置在文本的右下方？(How to position my image below and to the right of my text?)

编程入门 行业动态 更新时间:2024-10-24 02:30:16
如何将我的图像放置在文本的右下方？(How to position my image below and to the right of my text?)

我有以下设计：

请注意报价底部的签名。 它很好地放置在正确的文本上。

这是我到目前为止的html css版本：

我无法找出正确的方式将签名转移到正确的位置，并与引用的权限保持一致。

这是我的html：

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="main.css"> </head> <body> <div class="header"> <div class="logo"> <img src="images/top-logo.png" alt="ProvenWord Logo"> </div> <ul class="nav"> <li>Home</li> <li>Proofreading</li> <li>Editing</li> <li>About</li> <li>How it works</li> <li>FAQ</li> <li>Contact</li> </ul> </div> <!--close header --> <div class="tagline"> <div class="section-container"> <h1><span>Transform your written</span> work into a <strong>masterpiece<strong></h1> <a href="freequote.html" class="button">Free Quote</a> <p class="first-quote">"Your proofreading assistance has enabled me to successfully complete my dissertation with greater ease."</p> <img src="images/sudthida-signature.png" alt="Sudthida's Signature"> <p class="first-quote school">Sudthida P. Ph.D in Educational Research - King's College University of London</p> </div><!--close section-container--> </div><!--close tagline--> </body> </html>

这是我的css：

html, body, h1, h2, h3, h4, p, ol, ul, li, a, div { padding: 0px; border: 0px; margin: 0px; font-size: 100%; font: inherit; } /*----------------------------*/ /*----- Tag Declarations -----*/ /*--------------------------- */ body { font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif; } h1{ font-size: 36px; font-weight: 400; line-height: 1.2; } h2 { font-size: 28px; padding-bottom: 25px; font-weight: 300; line-height: 1.3; letter-spacing: 1px; } h2 strong { font-weight: 600; } p { font-size: 15px; line-height: 140%; font-weight: 300; letter-spacing: 1px; } .button { display: inline-block; line-height: 48px; /*setting this to the button height makes the text centered */ height: 48px; width: 185px; background: #ffd000; border: 2px solid #b59400; font-size: 18px; font-weight: 100;x; border-radius: 60px; } a.button { text-decoration: none; color: #000000; } a.button:hover { background: #feef00; } li { list-style: none; margin-bottom: 0.5em; text-indent: 1.5em; background-image: url(images/check.png); background-repeat: no-repeat; letter-spacing: 1px; font-weight: 200; font-size: 12px; } .section-container { width: 520px; margin: 0 auto; } /*--------------------------*/ /*----- Header Section -----*/ /*--------------------------*/ .header { padding: 25px 0px 32px 48px; } .logo img { float: left; padding-right: 130px; } .nav { list-style-type: none; padding-top: 32px; } .nav li { display: inline; padding-right: 10px; font-size: 12px; font-weight: 200; } /*---------------------------*/ /*----- Tagline Section -----*/ /*---------------------------*/ .tagline { background: #abdfe8 url(images/bg-tagline.png) no-repeat; height: 450px; text-align: center; } .section-container h1 { padding-top: 130px; } .section-container h1 span { letter-spacing: 2px; } .section-container .button { margin: 40px 0 40px 0; } .first-quote { font-size: 13px; line-height: 1.5; color: white; margin: 0 25px 10px 25px; } .section-container img { display: block; text-align: right; } .section-container .school { font-size: 10px; letter-spacing: 0.5px; text-align: center; }

我已经使用margin属性来移动图像，但我认为边距用于在块元素之间创建空间。 我不想破解我的布局方式，我想了解它是如何工作的以及在css中使用不同属性的正确方法是什么。

任何帮助非常感谢。

I have the following design:

Notice the signature on the bottom under the quotation. Its very nicely placed on the right aligned with the text.

Here is my html css version so far:

I'm having trouble figuring out the correct way to get the signature over to the right and aligned with the right of the quotation.

Here is my html:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="main.css"> </head> <body> <div class="header"> <div class="logo"> <img src="images/top-logo.png" alt="ProvenWord Logo"> </div> <ul class="nav"> <li>Home</li> <li>Proofreading</li> <li>Editing</li> <li>About</li> <li>How it works</li> <li>FAQ</li> <li>Contact</li> </ul> </div> <!--close header --> <div class="tagline"> <div class="section-container"> <h1><span>Transform your written</span> work into a <strong>masterpiece<strong></h1> <a href="freequote.html" class="button">Free Quote</a> <p class="first-quote">"Your proofreading assistance has enabled me to successfully complete my dissertation with greater ease."</p> <img src="images/sudthida-signature.png" alt="Sudthida's Signature"> <p class="first-quote school">Sudthida P. Ph.D in Educational Research - King's College University of London</p> </div><!--close section-container--> </div><!--close tagline--> </body> </html>

Here is my css:

html, body, h1, h2, h3, h4, p, ol, ul, li, a, div { padding: 0px; border: 0px; margin: 0px; font-size: 100%; font: inherit; } /*----------------------------*/ /*----- Tag Declarations -----*/ /*--------------------------- */ body { font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif; } h1{ font-size: 36px; font-weight: 400; line-height: 1.2; } h2 { font-size: 28px; padding-bottom: 25px; font-weight: 300; line-height: 1.3; letter-spacing: 1px; } h2 strong { font-weight: 600; } p { font-size: 15px; line-height: 140%; font-weight: 300; letter-spacing: 1px; } .button { display: inline-block; line-height: 48px; /*setting this to the button height makes the text centered */ height: 48px; width: 185px; background: #ffd000; border: 2px solid #b59400; font-size: 18px; font-weight: 100;x; border-radius: 60px; } a.button { text-decoration: none; color: #000000; } a.button:hover { background: #feef00; } li { list-style: none; margin-bottom: 0.5em; text-indent: 1.5em; background-image: url(images/check.png); background-repeat: no-repeat; letter-spacing: 1px; font-weight: 200; font-size: 12px; } .section-container { width: 520px; margin: 0 auto; } /*--------------------------*/ /*----- Header Section -----*/ /*--------------------------*/ .header { padding: 25px 0px 32px 48px; } .logo img { float: left; padding-right: 130px; } .nav { list-style-type: none; padding-top: 32px; } .nav li { display: inline; padding-right: 10px; font-size: 12px; font-weight: 200; } /*---------------------------*/ /*----- Tagline Section -----*/ /*---------------------------*/ .tagline { background: #abdfe8 url(images/bg-tagline.png) no-repeat; height: 450px; text-align: center; } .section-container h1 { padding-top: 130px; } .section-container h1 span { letter-spacing: 2px; } .section-container .button { margin: 40px 0 40px 0; } .first-quote { font-size: 13px; line-height: 1.5; color: white; margin: 0 25px 10px 25px; } .section-container img { display: block; text-align: right; } .section-container .school { font-size: 10px; letter-spacing: 0.5px; text-align: center; }

I have used the margin property to move the image over but I thought margins were used to create space between block elements. I don't want to hack my way to the layout, I want to understand how this works and what is the correct way to use the different properties in css.

Any help much appreciated.

最满意答案

您可以使用float将图像向右对齐，并结合边距将其精确放置在需要的位置，然后清除图像下方的文本。

我在下面评论了你的CSS中的变化。 

html,
body,
h1,
h2,
h3,
h4,
p,
ol,
ul,
li,
a,
div {
  padding: 0px;
  border: 0px;
  margin: 0px;
  font-size: 100%;
  font: inherit;
}
/*----------------------------*/

/*----- Tag Declarations -----*/

/*--------------------------- */

body {
  font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
}
h1 {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
}
h2 {
  font-size: 28px;
  padding-bottom: 25px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 1px;
}
h2 strong {
  font-weight: 600;
}
p {
  font-size: 15px;
  line-height: 140%;
  font-weight: 300;
  letter-spacing: 1px;
}
.button {
  display: inline-block;
  line-height: 48px;
  /*setting this to the button height makes the text centered */
  height: 48px;
  width: 185px;
  background: #ffd000;
  border: 2px solid #b59400;
  font-size: 18px;
  font-weight: 100;
  x;
  border-radius: 60px;
}
a.button {
  text-decoration: none;
  color: #000000;
}
a.button:hover {
  background: #feef00;
}
li {
  list-style: none;
  margin-bottom: 0.5em;
  text-indent: 1.5em;
  background-image: url(images/check.png);
  background-repeat: no-repeat;
  letter-spacing: 1px;
  font-weight: 200;
  font-size: 12px;
}
.section-container {
  width: 520px;
  margin: 0 auto;
}
/*--------------------------*/

/*----- Header Section -----*/

/*--------------------------*/

.header {
  padding: 25px 0px 32px 48px;
}
.logo img {
  float: left;
  padding-right: 130px;
}
.nav {
  list-style-type: none;
  padding-top: 32px;
}
.nav li {
  display: inline;
  padding-right: 10px;
  font-size: 12px;
  font-weight: 200;
}
/*---------------------------*/

/*----- Tagline Section -----*/

/*---------------------------*/

.tagline {
  background: #abdfe8 url(images/bg-tagline.png) no-repeat;
  height: 450px;
  text-align: center;
}
.section-container h1 {
  padding-top: 130px;
}
.section-container h1 span {
  letter-spacing: 2px;
}
.section-container .button {
  margin: 40px 0 40px 0;
}
.first-quote {
  font-size: 13px;
  line-height: 1.5;
  color: white;
  margin: 0 25px 10px 25px;
}
.section-container img {
  display: block;
  float: right; /* USE FLOAT */
  margin-right: 1.8em; /* WITH MARGIN TO GIVE THE CORRECT POSITION */
}
.section-container .school {
  clear: both; /* CLEAR THE FLOATED IMAGE */
  font-size: 10px;
  letter-spacing: 0.5px;
  text-align: center;
} 
  
<div class="header">
  <div class="logo">
    <img src="images/top-logo.png" alt="ProvenWord Logo">
  </div>
  <ul class="nav">
    <li>Home</li>
    <li>Proofreading</li>
    <li>Editing</li>
    <li>About</li>
    <li>How it works</li>
    <li>FAQ</li>
    <li>Contact</li>
  </ul>
</div>
<!--close header -->
<div class="tagline">
  <div class="section-container">
    <h1><span>Transform your written</span> work into a <strong>masterpiece<strong></h1>
    <a href="freequote.html" class="button">Free Quote</a>
    <p class="first-quote">"Your proofreading assistance has enabled me to successfully complete my dissertation with greater ease."</p>
    <img src="images/sudthida-signature.png" alt="Sudthida's Signature">
    <p class="first-quote school">Sudthida P. Ph.D in Educational Research - King's College University of London</p>
  </div>
  <!--close section-container-->
</div>
<!--close tagline--> 
  
 

You can use float to align the image to the right, combined with margin to place it exactly where needed, then just clear the text below the image.
 

I've commented the changes in your CSS below.
 

 
 
  
  
html,
body,
h1,
h2,
h3,
h4,
p,
ol,
ul,
li,
a,
div {
  padding: 0px;
  border: 0px;
  margin: 0px;
  font-size: 100%;
  font: inherit;
}
/*----------------------------*/

/*----- Tag Declarations -----*/

/*--------------------------- */

body {
  font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
}
h1 {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
}
h2 {
  font-size: 28px;
  padding-bottom: 25px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 1px;
}
h2 strong {
  font-weight: 600;
}
p {
  font-size: 15px;
  line-height: 140%;
  font-weight: 300;
  letter-spacing: 1px;
}
.button {
  display: inline-block;
  line-height: 48px;
  /*setting this to the button height makes the text centered */
  height: 48px;
  width: 185px;
  background: #ffd000;
  border: 2px solid #b59400;
  font-size: 18px;
  font-weight: 100;
  x;
  border-radius: 60px;
}
a.button {
  text-decoration: none;
  color: #000000;
}
a.button:hover {
  background: #feef00;
}
li {
  list-style: none;
  margin-bottom: 0.5em;
  text-indent: 1.5em;
  background-image: url(images/check.png);
  background-repeat: no-repeat;
  letter-spacing: 1px;
  font-weight: 200;
  font-size: 12px;
}
.section-container {
  width: 520px;
  margin: 0 auto;
}
/*--------------------------*/

/*----- Header Section -----*/

/*--------------------------*/

.header {
  padding: 25px 0px 32px 48px;
}
.logo img {
  float: left;
  padding-right: 130px;
}
.nav {
  list-style-type: none;
  padding-top: 32px;
}
.nav li {
  display: inline;
  padding-right: 10px;
  font-size: 12px;
  font-weight: 200;
}
/*---------------------------*/

/*----- Tagline Section -----*/

/*---------------------------*/

.tagline {
  background: #abdfe8 url(images/bg-tagline.png) no-repeat;
  height: 450px;
  text-align: center;
}
.section-container h1 {
  padding-top: 130px;
}
.section-container h1 span {
  letter-spacing: 2px;
}
.section-container .button {
  margin: 40px 0 40px 0;
}
.first-quote {
  font-size: 13px;
  line-height: 1.5;
  color: white;
  margin: 0 25px 10px 25px;
}
.section-container img {
  display: block;
  float: right; /* USE FLOAT */
  margin-right: 1.8em; /* WITH MARGIN TO GIVE THE CORRECT POSITION */
}
.section-container .school {
  clear: both; /* CLEAR THE FLOATED IMAGE */
  font-size: 10px;
  letter-spacing: 0.5px;
  text-align: center;
} 
  
<div class="header">
  <div class="logo">
    <img src="images/top-logo.png" alt="ProvenWord Logo">
  </div>
  <ul class="nav">
    <li>Home</li>
    <li>Proofreading</li>
    <li>Editing</li>
    <li>About</li>
    <li>How it works</li>
    <li>FAQ</li>
    <li>Contact</li>
  </ul>
</div>
<!--close header -->
<div class="tagline">
  <div class="section-container">
    <h1><span>Transform your written</span> work into a <strong>masterpiece<strong></h1>
    <a href="freequote.html" class="button">Free Quote</a>
    <p class="first-quote">"Your proofreading assistance has enabled me to successfully complete my dissertation with greater ease."</p>
    <img src="images/sudthida-signature.png" alt="Sudthida's Signature">
    <p class="first-quote school">Sudthida P. Ph.D in Educational Research - King's College University of London</p>
  </div>
  <!--close section-container-->
</div>
<!--close tagline-->

更多推荐

本文发布于:2023-07-08 19:55:00，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/1080219.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：如何将   图像   文本   text   image

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表