1

「続きを読む」テキストボタンを作成しようとしていますが、作成に成功しましたが、2つの部分に分割しようとすると問題が発生します->半分のテキストと半分の画像/フォトギャラリーになります(新聞の記事 - 左がテキスト、右が画​​像 ) http://jsfiddle.net/nN3Uz/6/ . 私の期待どおりに機能するには、このコードに何を変更する必要がありますか? ps: メインの div の dimensoin がうまく機能していないことがわかります。リードをクリックする前にテキストに輪郭がありません... 境界線ができるようにするには、何を変更すればよいですか? html

<p id="title">Math</p>
<div class="expander" id="aspect">
                <div id="paragraf">
                Paragraph 2: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
                laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est Excepteur sint occaecat 
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est Excepteur sint occaecat cupidatat non proident, sunt in c
                ulpa qui officia deserunt mollit anim id est 
                </div>
    <div id="image"><img src=""></div>
        <div id="clear"></div>
        </div>

CSS

#title {
 border:1px solid #800000;
 width:1000px;
 background:#800000;
 color:#fff;
 margin-left:0px;
 font-size: 30px;
 }

#aspect {
width:1000px;
border: 1px solid #800000;
background:#fff;
box-shadow: 5px 5px 5px #494949;
padding-left:10px;
}

#paragraf {
margin-right:10px;
width:500px;
    float:left;
}

#image {
    width:400px;
    height:200px;
    background:blue;
    float:left;
}

#clear {
   clear:both;
}

実装されている JavaScript に問題がないことはわかっていますが、html または css に何か問題があり、オーバーフローまたは私の問題と呼ばれるものがあります。

4

3 に答える 3

0

境界線を取得するには、div の最小高さを設定します

アスペクト div の使用で-

最小高さ: 65px;

および画像divの場合-

最小高さ: 400px;

高さと幅がdivの画像のサイズ以下であるが、それより大きくない画像を使用していることを確認してください。またはHTMLの使用で

<div id="image"><img src="" height="200" width="400"></div>

それが役に立てば幸い！！

于 2013-03-18T09:20:09.540 に答える
0

デフォルトでは、すべての Div がブロックとして表示されます。他の下に 1 つ。それらを並べて表示するには、display:inline;を使用します。対応する div のスタイルで

于 2013-03-18T09:04:09.697 に答える