1

このレイアウトを構築する必要があります

レイアウト

しかし、さまざまなテストの後、画像の配置方法がわかりません。テキストは、ある div から別の div に続きます。column CSS3 プロパティを使用することを考えましたが、それはより良い解決策ではないと思います。このレイアウトを実装するにはどうすればよいですか?

アドバイスありがとう。

編集：

これは、最後のテストの HTML および CSS コードです。

.span11{
   width: 90%;
   display: block;
   margin: 0 auto;
   -moz-column-count: 2;
   -moz-column-gap: 20pt;  
   -webkit-column-count: 2;
   -webkit-column-gap: 20pt;
   column-count: 2;
   column-gap: 20pt;    
}
#foto{
   float: right;
   margin-top: 50px;    
}

 <div class="span11">
    <div id="foto">
        <img src="http://fpoimg.com/600x400?text=Preview" >
    </div>                     
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui ellus.Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in  tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam.
    </div>

これは最後のテストの Jsfiddle です。

http://jsfiddle.net/DVwws/

4

1 に答える 1

0

ここで見つけた例を使用した後、ソースコードを編集し、最終的に目的の結果でJSFiddleを作成することができました。

これを達成するための一般的なガイド:

  1. テキストで満たされた 2 つの横に並んだ div を作成する
  2. 「Content」CSS プロパティを使用して、必要な場所に段落に「穴」を作成しますcontent: ""; width: 125px; height: 250px;。
  3. 絶対配置を使用して、作成した「穴」内に画像を配置します。

この画像は、配置の概念を理解するのに役立ちます: (緑色のセクションが穴であり、垂直に中央に配置されていると想像してください) ここに画像の説明を入力

私が作成した JSFiddle の HTML と CSS は次のとおりです。

<style>
  #page-wrap { width: 100%; margin: 80px auto; position: relative; }
  #logo { position: absolute; top: 125px; left: 50%; margin-left: -125px; }
  .left, .right { width: 49%; text-align: justify}
  .left { float:left; }
  .right { float:right; }
  #l, #r { width: 100%; position: relative;}
  #l { float: left;  text-align: justify}
  #r { float: right; text-align: justify}   
  #l:before, #r:before { content: ""; width: 150px; height: 250px; vertical-align:-50%;}
  #l:before { float: right;}
  #r:before { float: left; }
</style>

と

    <div id="page-wrap">

        <img src="http://placekitten.com/250/250" id="logo">

<div class="left">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. <div id="l">Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metuPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt conum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursusdiment faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. </div>Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </div>

        <div class="right">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. <div id="r">Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </div>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </div>

    </div>

また、データベースからテキストを動的に読み込んでいると言ったので、ここでは、長さを計算して2つの等しいチャンクに分割する簡単な方法です。

<?php
//some SQL Queries setting $str
$len = strlen($str);
$part1 = substr($str, $len/2); 
$part2 = substr($str, $len/2+1,$len);
// Insert $part1 & $part2 text chunks into each div. 
?>

注: 正確なカットにより、その文字番号が単語の途中にある場合、その単語は 2 つの部分にカットされます。次のスペースを切り取る方法を簡単に理解するためのリソースがあります。しかし、それはこの特定の質問には関係ありません。

于 2013-06-27T18:03:11.797 に答える