0

我应用了 html 代码和内联样式,两列带有文本链接和每侧的垂直图像。在中间我放了帖子的文字和内容。

如果帖子很大,则在侧列上没有足够的图像以将文本保持在中间后,文本将占据整个页面宽度。

我想将文本保留在这些列的中间。

  <div style="float: right; text-align: center;">

<p><strong>Version.V
   </strong></p>
  <p><strong> 999
    </strong></p>
  <p><strong>August 7, 2013</strong></p>
  <p>
    <a href="#">News</a>    </p>
  <p><a href="#">Updated
    News</a></p>
  <p>
    <a href="#">Old
    News</a></p>
    <p><a href="#">Posts</a></p>
    <p><a href="#">Daily News</a></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><a href="#"><img title="here" alt="here" src="picture.gif" width="150" height="97" /></a></p>
</div>

<div style="float: left; padding-right: 1px; text-align: center;">

  <p><strong>Version.V
   </strong></p>
  <p><strong> 999
    </strong></p>
  <p><strong>August 7, 2013</strong></p>
  <p>
    <a href="#">News</a>    </p>
  <p><a href="#">Updated
    News</a></p>
  <p>
    <a href="#">Old
    News</a></p>
    <p><a href="#">Posts</a></p>
    <p><a href="#">Daily News</a></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><a href="#"><img title="here" alt="here" src="picture.gif" width="150" height="97" /></a></p>
</div>
<div>


<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&rsquo;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
  <span id="more-208"> </span><br>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&rsquo;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&rsquo;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&rsquo;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&rsquo;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>
</body>
</html>

中间的文字

它下降的时间越长,它将从页面边缘向左对齐,我希望它位于列中间的一个框中。

4

2 回答 2

0

向您的 p 标签添加一个类,该类包含您的主要内容,如下所示

小提琴

<p class="content">[main content here]</p>

css

.content
{
    width:100%;
    padding: 0 150px;
    box-sizing:border-box;
}
于 2013-08-07T21:18:47.323 回答
0

看看这个小提琴

只需在您的内容 div 中添加一个样式属性:

style="margin-left: 150px; margin-right: 150px;"

当然,这是考虑到您的侧栏将是 150 像素宽(我可以告诉您的图像宽度)。

最后,正如其他人之前所说,尝试使用外部样式表,因为它更易于维护且易于遵循。

祝你好运!

于 2013-08-08T01:51:22.650 回答