Question

我的页面目前看起来像这样：http://i.imgur.com/RRriMuu.jpg

我试图将按钮（包括“Wesson”，下拉菜单）和“立即购买”转换为图片标题，以便它直接位于金毛猎犬（Wesson）的绘图下方。它不仅不在图像下方居中，而且还将其他图像推向右侧。理想情况下，我真的希望按钮位于图像的正上方，为此我在页面上创建了额外的空间。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--

#banner {width:100%}
#banner img {width:100%;height:auto}

nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-align:center;
background-color:#222419}
li {display:inline-block;background-color:#222419;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:18px;
font-family:Arial, sans-serif;background-color:#222419;}
nav a:hover {text-decoration:none}

a{float:left;
 margin-right:58px;
 margin-left:58px;
 color:#000;
 text-decoration:none;
}

body  {background-image:url("background1.jpg");
   background-size:1710px 1405px;
   background-repeat:no-repeat;

}

.white_bg  {background-color:#ffffff;
        padding: 3px;
}

.print   {-webkit-transform:rotate(-15deg);
      transform:rotate(-15deg);
}

.print2   {-webkit-transform:rotate(15deg);
       transform:rotate(15deg);
}

#wesson   {text-align:center;width:250px;}
#stanley  (text-align:center;width:250px;}

-->
</style>
<meta charset="utf-8"/>
<title>DrawYourPets.com</title>
</head>

<body>

<header>
<nav> 
<div style="text-align:center" id="banner">
<img src="drawyourpetsbanner3.jpg" border="0" 
alt="DrawYourPetsBanner3"  title="DrawYourPetsBanner2">
</div>

<div>
<ul>
<li><a href="index.html"><strong>HOME</strong></a></li>
<li><a href="contact.html"><strong>CONTACT</strong></a></li>
<li><a href="gallery.html"><strong>GALLERY<strong></a></li>
<li><a href="store.html"><strong>STORE</strong></a></li>
</ul>
</div>

</nav>
</header>

<section>
<aside>
</aside>

<article>


<p style="text-align:center;font-family:arial">
<font size="4"><strong>Prints, coffee mugs, magnets, 
and postcards are available for every drawing!
</strong>
</font>
</p>

<img class="print" style="float:left;margin-left:210px;
margin-right:25px;margin-top:50px"
 src="wesson_print.jpg" height="180px" weight="160px">
<img class="print2" style="float:left;margin-right:70px" 
src="mug.png" height="290px" weight="290px">
<img class="print" style="float:left;margin-right:125px;margin-top:55px" 
src="magnet.jpg" height="160px" weight="160px">
<img class="print2" style="float:left;margin-right:20px;
margin-top:85px" src="postcard5.jpg" height="120px" weight="120px">
<p style="clear:both;">

<br>
<br>
<br>
<br>
<br>

</p>

<figure>
<img src="wesson.jpg" height="300" weight="260" style="float:left;
margin-left:250px;margin-right:55px">
<figcaption>
<form action="https://www.paypal.com/cgi-bin/webscr" 
method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="J4TLYQ4FUR6BC">

<table style="text-align:center">
<tr><td><input type="hidden" name="on0" value="Wesson">
<p style="text-align:center;font-family:arial">
<font size="4"><strong>Wesson</strong>
</font>
</p>
</td>
</tr>
<tr>
<td>
<select name="os0">
<option value="Unframed Print">Unframed Print $50.00 USD</option>
<option value="Coffee Mug">Coffee Mug $10.00 USD</option>
<option value="Refrigerator Magnet">Refrigerator Magnet 
$4.00 USD</option>
<option value="Postcard">Postcard $1.00 USD</option>
</select> 
</td>
</tr>
</table>
<br>
<div style="float:left;margin-left:50px;">
<input type="hidden" name="currency_code" value="USD">
<input type="image" 
src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" 
border="0" name="submit" 
alt="PayPal - The safer, easier way to pay online!">
<img alt="buynow" border="0" 
src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" 
width="1" height="1">
</div>
</form>
</figcaption>
</figure>
</div>

<img src="stanley.jpg" height="300" weight="260" 
style="float:left;margin-right:55px">
<img src="archibald.jpg" height="300" weight="260" 
style="float:left;margin-right:50px">
<p style="clear:both;">

<br>
<br>
<br>
<br>

<img style="float:left;margin-left:525px;margin-right:50px"
 src="maggie.jpg" height="260" weight="300">


<br>
<br>

</article>

</section>

<footer>
<div style="text-align:center" id="banner">
<img src="banner3.jpg" border="0" alt="Banner3">
</div>
</footer>

</body>
</html>

如果你看错了，请告诉我。谢谢！

Answer 1

我希望我得到了，你想做什么：

将标题，下拉菜单和按钮放在图像上方。
水平居中元素，图像宽度为基础。
为每张图片重复此模式
将图像排列在相同的高度上。

要做到这一点，你需要某种包装。这是一个过于简单的例子：

<强> HTML

<div class="wrapper">

  <div class="item">
    <div class="item-info">
      <h1>Wesson</h1>
      <!-- Add Paypal form code here -->
    </div>
    <img src="wesson.jpg">
  </div>

  <!-- Repeat the .item code for the next item -->

</div>

<强> CSS

.item {
  float:left; /* Enable the next item to sit next to this one */
  margin-right: 10px; /* The margin between this and the next item */
  text-align: center; /* Center all text inside the item */
}

/* Avoid extra space after the last item */
.item:last-of-type { margin-right: 0; }

/* Center the dropdown inside the item */
.item select { margin: 0 auto; }

/* A better way would be to give the input a class like .button and use this selector here */
.item input[type="image"] {
  display: block; /* Make it a block level element to force it on its own line */
  margin: 0 auto; /* Center the button inside the item */
}

还有一点代码解释：
我将每个内容块称为一个项目。该项目包括图像，标题和贝宝形式。容器div（.item）缩小到最大子元素的宽度。在这种情况下，图像。每个其他项目都在div内部居中。你得到的是一个块，它扩展到最宽的子元素，并根据需要扩展高度。

现在可以为下一个元素重复此代码。这两个都浮动到左侧，如果父容器（.wrapper）足够宽，它们可以使它们彼此相邻。 .wrapper用于设置项目的边界。您可以为其添加边距，以在页面上定义这些元素的位置。如果它足够宽，可以将3个项目放在一起，那么它就会这样做，但是一旦它变窄3，就会进入下一行。

实例
我在codepen上汇总了一些代码示例你可以在这里看到它： http://codepen.io/anon/pen/BywgqL?editors=110

将PayPal按钮转换为图像标题

1 个答案: