0

写真セクションとテキストセクションの間に横線を引きたいのですが。

これが私のウェブサイトです：

http://violetoeuvre.com/

これが機能しているjsfiddleです。

http://jsfiddle.net/GCxh9/

 <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.moveTo(0,0);
        ctx.lineTo(980,0);
        ctx.stroke();

</script>

私はそれを頭に入れました。これが私のhtmlです：

<!-- CONTENT____________________________________________-->

<div class="content_wrapper">

<!-- Photo __________________________________________-->

    <div class="home_photo">
    </div>

    <canvas id="myCanvas" width="980" height="100" style="border:0px solid #d3d3d3;"></canvas>
<!-- About___________________________________________________-->

    <div class="home_text">
        <p>Emma Carmichael is a writer and editor based in Brooklyn, NY, although she hails from Brattleboro, VT. Emma graduated from Vassar College in 2010 with a degree in Urban Studies; ETC...
    </p>
    </div>

</div>

要素の間に余分なスペースがあるので、明らかに何かをしています。何か案は？

ありがとうございました！

4

2 に答える 2

0

ここにはいくつかのポイントがあります。

  1. height=100を設定しています。それは余分なスペースを引き起こしています

  2. また、Chromeを使用している場合は、独自のスタイルが追加されます。この場合、以下のdiv'home_text'には、<p>クロムが適用される

    p {-webkit-margin-before：1em; -webkit-margin-after：1em; -webkit-margin-start：0px; -webkit-margin-end：0px; }

あなたのウェブサイトでreset.cssまたは同様のものを使用することをお勧めします。

また、キャンバスを使用して仕切りを作成するのは、最適な方法ではない場合があります。なぜそれを持っ<div>て設定しないのですかwidth、heightそしてbackground-color: black;

于 2013-03-26T19:06:41.973 に答える
0

var c=document.getElementById("myCanvas");未定義のオブジェクトを返しています。

スクリーンショット：

ここに画像の説明を入力してください

行の後のどこかにこのコードを保持します<canvas id="myCanvas" width="980" height="100" style="border:0px solid #d3d3d3;"></canvas>

<script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.moveTo(0,0);
        ctx.lineTo(980,0);
        ctx.stroke();

</script>

Webページのbodyタグを閉じる前に 、上記のスクリプトを保持することをお勧めします</body>

于 2013-03-26T19:08:03.130 に答える