0

到目前为止我做了什么：http: //goo.gl/sDhLA

我应该达到的目标：http: //goo.gl/tqo7m

提前感谢您的帮助，这里是 html/css 的新手。

干杯。

更新

我的错。我忘了提到我实际上的目标是对代码进行最少的主要编辑，因为有些代码我无法更改。（在我的作业中规定）。

另一方面，学习更多的东西并没有任何害处。了解更多关于 line-height、box-sizing 等新命令的信息：border-box 真的很有趣。

但是，我很遗憾没有发生负填充。它会解决左右边缘的间隙是吗？:O

4

3 回答 3

0

看起来您需要减小容器的宽度（或增加内容的宽度）。

你应该在这里发布你的代码，只有这样我才能确定这个答案是正确的。

你的代码是一团糟。这是我做的（我有单位，cm因为它可以在打印时提供更好的控制，您可以更改单位）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>Revisions Bookstore and Cafe</title>

    <style type="text/css">

        @font-face {
            font-family: 'ChunkFiveRegular';
            src:         url('Chunkfive-webfont.eot');
            src:         local('?'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfontb5K2fJwj') format('svg');
            font-weight: normal;
            font-style:  normal;
        }
        * {
            padding: 0;
            margin: 0;
        }

        h1 {
            border:           0.1cm solid rgb(65, 105, 225);
            font-family:      ChunkFiveRegular,serif;
            background-color: rgb(189, 204, 212);
            font-size:        2em;
        }

        #card div {
            font-family:      ChunkFiveRegular,serif;
        }

        #card {
            font-family:  Verdana,serif;
            width: 15cm;
            padding: 0.2cm;
            border: 0.07cm black solid;
            margin: 1cm auto;
        }

        #card div p {
            padding: 0.2cm 0.2cm 0.2cm 0.4cm;
        }

        #card > p {
            background: black;
            color: white;
            text-align: right;
            padding: 0.1cm;
        }

    </style>

</head>

<body>
<div id="card">
    <h1>Revisions Bookstore and Cafe</h1>

    <div>
        <p class="maintext">Custom brewed coffee and hand-selected books.</p>

        <p class="maintext">Special orders are our specialty.</p>
    </div>

    <p>412 N. 25th St.<br/>Richmond, VA 23223<br/>(804) 555-2565</p>
</div>

</body>

</html>

​
于 2012-04-29T10:58:22.523 回答
0

好吧，我看着实现您想要的结果，所以我基本上手动将事物设置为与原始宽度相同的宽度，但进行了一些修改（主要是设置边距和宽度），同时保持 em 格式。

但继承人新的CSS：

  @font-face {
            font-family: 'ChunkFiveRegular';
            src: url('Chunkfive-webfont.eot');
            src: local('?'), url('Chunkfive-webfont.woff')format('woff'),url('Chunkfivewebfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfontb5K2fJwj')format('svg');
            font-weight: normal;
            font-style: normal;
            }

  h1 {
    text-align: center;

    border: 0.1em solid rgb(65,105,225);
    margin-top: 8px;
    margin-left:8px;
    margin-right:8px;
    padding: 0.25em;

    font-family: ChunkFiveRegular;
    background-color: rgb(189,204,212);
    font-weight: normal;
    font-size: 2em;
    }

  #contact {
    text-align: right;

    margin: 0 8px 8px;
    padding: 1em;
    font-family: ChunkFiveRegular;
    color: white;
    background-color: #212100;
    margin-bottom: 8px;
    }

  #box {

    margin: 0 8px;
    padding: 0.5em;
    }

  .maintext {
    text-align: left;
    }

  #body {
  font-family: Verdana;
  border: 0.07cm solid black;
  margin: 2.5em;
  margin-left: 23em;
  margin-right: 4em;
  width: 33.4em;

  }

</style>
于 2012-04-29T11:33:16.913 回答
0

我更新了你的 jsfiddle：http: //jsfiddle.net/BramVanroy/LGFLB/1/

提示：不要使用 ID 'body'（或任何 html 标签作为 ID）！它变得混乱！您可以通过简单地使用来轻松地瞄准身体body。

我保留了您提出的 HTML 结构。我改变了相当多的CSS。尤其是宽度、边距和大小。另请注意box-sizing！

body {
  font-family: Verdana;
  border: 0.07cm solid black;
  margin: 2.5em;
  margin-left: 17em;
  margin-right: 4em;
  width: 45em;
}

h1 {
  text-align: center;
  border: 0.1em solid rgb(65,105,225);
  width: 96%;
  margin: 0.2em auto;
  padding: 0.25em;
  font-family: Rockwell;
    font-weight: bold;
    letter-spacing: 2px;
  background-color: rgb(189,204,212);
  font-weight: normal;
  font-size: 2.5em;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#contact {
  text-align: right;
  width: 96%;
  margin: 1em auto 0;
  padding: 0.25em;
  font-family: Rockwell;
  color: white;
  background-color: #212100;
  margin-bottom: 8px;
}

#box {
  width: 92%;
  margin: 0 auto;
  padding: 0.5em;
  line-height: 2;
}

.maintext {
  text-align: left;
}

​</p>

于 2012-04-29T11:35:41.563 回答