CSSを使用したページフォーマット

-1

このページのすべてのテキストを画像の右側に揃えて、コンテンツをページの中央に揃えるために何らかのボックスを置いています。CSSを使用したページフォーマット

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Test page</title> 
<style> 

body { 
padding-top: 10px; 
} 

</style> 
</head> 
<body> 

<div class="container"> 

<div> 
    <h1>The Title</h1> 
</div> 

<hr> 

<div> 

    <div> 
    <img src="http://placehold.it/200x200" alt=""> 
    </div> 

<div> 
    <h3>Brief Description</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra 
euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, 
adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, 
justo eu convallis placerat, felis enim. 
    </p> 

    <h3>More Details</h3> 
    <ul> 
    <li>Lorem Ipsum</li> 
    <li>Dolor Sit Amet</li> 
    <li>Consectetur</li> 
    <li>Adipiscing Elit</li> 
</ul> 

</div> 

</div> 

<hr> 
</div> 

</body> 
</html>

出典

2016-09-13 Maresia

。 –

このコードを試してください：あなたは、少なくともそれが最初に試してみるない限り、あなたは、おそらく多くの助けを得ることはありません

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test page</title> 
    <style> 
    body { 
     padding-top: 10px; 
    } 
    </style> 
</head> 
<body> 
    <div class="container"> 
    <div> 
     <h1>The Title</h1> 
    </div> 
    <hr> 
    <div> 
     <div Style="float: left; width: 30%"> 
     <img src="http://placehold.it/200x200" alt=""> 
     </div> 
     <div Style="float: left; width: 70%"> 
     <h3>Brief Description</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra 
     euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, 
     adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, 
     justo eu convallis placerat, felis enim. 
     </p> 
     <h3>More Details</h3> 
     <ul> 
     <li>Lorem Ipsum</li> 
     <li>Dolor Sit Amet</li> 
     <li>Consectetur</li> 
     <li>Adipiscing Elit</li> 
     </ul> 
    </div> 
    </div> 
    </div> 
    <hr> 
</body> 
</html>

出典

2016-09-13 02:11:25 Bahman

私のためにはじめて、私はeveything centerを作るためにページの両側の空の行に追加する必要があります。 – Maresia

タグに問題があります。幅を20％と70％に変更するとページが折り返されるのはなぜですか？ – Maresia

20％と70％はページの全幅をカバーしないためです。それによって

が空きスペースにジャンプします – Bahman

CSSを使用したページフォーマット

答えて

関連する問題