Question

我无法弄清楚为什么我的文字会在奇怪的地方破碎。没有影响包装或显示的CSS。我已将其缩小到以下代码导致问题。（请参阅HTML和CSS）。我很确定intro-serv div文本是破坏的，因为它包裹着横幅文本容器的一部分，但不知道如何解决它。再一次 - 谢谢你的帮助。

（示例图片：http://disposablewebpage.com/turn/ecoifEp5N0这是Dreamweaver的截图）

这是我的代码：

＆＃13;

div#banner-text {
  background-color: rgba(218, 218, 218, 0.6);
  color: black;
  color: #black !important;
  text-transform: uppercase;
  font-size: 2.45em !important;
  font-family: 'Pathway Gothic One', sans-serif;
  float: right;
  opacity: 1;
  padding: 10px;
  width: 470px;
  z-index: 2;
  position: relative;
  top: -80px;
  font-weight: 700;
  letter-spacing: 0em;
  word-spacing: 0em;
  line-height: 1.2;
}

p.p-serv {
  background-color: pink;
}

div.bodyContent {
  width: 968px;
  height: auto;
  margin: 24px auto 10px;
  padding: 0;
}

div.mainContentSingle {
  padding: 20px 44px 44px 44px;
  border: 1px solid #d1d3d4;
  box-shadow: 0px 2px 5px #2B2727;
}

body {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-family: Arial, Helvetica, Sans-Serif;
  background-image: url('../img/BackgroundMain_02.jpg');
  background-repeat: repeat-x;
  line-height: 20px;
  "

}

div#intro-serv {
  background-color: green;
}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<link href="./HP Indigo 10,000 Press   Superior Packaging &amp; Finishing_files/new_product_services.css" type="text/css" rel="stylesheet" />

<div class="bodyContent">

  <!-- Main body content -->

  <div id="ctl00_ctl00_cpMainBody_pnlMainContent" class="mainContentSingle">

    <div id="ctl00_ctl00_cpMainBody_cpMainContent_CmsContentDiv" class="page-content page-content-3413">
      <span id="ctl00_ctl00_cpMainBody_cpMainContent_pageTitle" class="SubHeader" style="color:#80888E;font-size:20px;">HP Indigo 10,000 Press Provides You With Color, Sheet Size, and Substrate Options for Hundreds of Applications</span>

      <!--   //*-----------------------begin content that I can edit--------------------------*//-->


      <!--BEGIN  STYLE TO HIDE HEADER TEXT FROM PAGE-->
      <style>
        span#ctl00_ctl00_cpMainBody_cpMainContent_pageTitle.SubHeader {
          display: none;
        }
      </style>

      <!--END  STYLE TO HIDE HEADER TEXT FROM PAGE-->

      <div class="breadcrumb"><a href="http://www.superiorpackagingandfinishing.com/">Home</a> &gt;
        <a href="http://www.superiorpackagingandfinishing.com/pages/about-us">Full Services</a></div>

      <div class="container"> <img src="./HP Indigo 10,000 Press   Superior Packaging &amp; Finishing_files/hp-indigo-10-000-printing.jpg" alt="HP Indigo 10,000 Press" title="HP Indigo 10,000 Press" style="" class="primary-image" />

        <!--BEGIN  BANNER TEXT HTML-->

        <div id="banner-text">Banner Text
        </div>

        <!--END BANNER TEXT HTML-->

        <!--BEGIN INTRO HTML-->

        <div id="intro-serv">intro Bacon ipsum dolor amet cillum turducken lorem deserunt, beef ribs venison mollit. Veniam deserunt cupim fatback capicola, ut chuck jowl kielbasa ribeye jerky cow sint lorem pastrami. Kielbasa flank non beef porchetta. Brisket laboris ullamco
          excepteur sirloin ham hock qui meatloaf spare ribs short ribs</div>

        <!--END INTRO HTML-->

        <!--BEGIN STANDARD BODY HTML-->

        <p class="p-serv">You probably need everything from marketing materials, like business cards and brochures, to in-house forms and training publications like seminar workbooks. With the variety of printed materials, comes a variety of quantity, color, and substrate
          requirements. Our HP Indigo 10,000 can handle them all.</p>


        <!--   //*---------------END content that I can edit--------------------------------*//-->

        <div class="Clear"></div>

        <div style="clear: both"></div>

        <!-- /Main body content -->

        </body>

        </html>
        </ul>

＆＃13;

Answer 1

尝试将文字包裹在<p>text goes here</p>中。我发现它可以帮助解决像这样的格式化问题。当然，如果没有额外的代码，我觉得我不知道整个故事，看看还有什么可能影响它。

Answer 2

我明白了：横幅文本div导致intro-serv div因某种浮动而断线。

我添加了

margin-bottom: -100px;

到

div＃banner-text {

属性，它解决了换行问题。完整更新的代码如下：

HTML：与原始相同

<强> CSS：

div#banner-text {
    background-color: rgba(218,218,218, 0.6);    color: black;
    color: #black !important;
    text-transform: uppercase;
    font-size: 2.45em !important;
    font-family: 'Pathway Gothic One', sans-serif;
    float: right;
    opacity: 1;
    padding: 10px;
    margin: 0;
    margin-bottom: -100px;
    width: 470px;
    z-index: 2;
    position: relative;
    top: -80px;
    font-weight: 700;
    letter-spacing: 0em;
    word-spacing: 0em;
    line-height: 1.2;
}

感谢所有回复的人。

什么是这些奇怪的换行符？

2 个答案: