2列に並んだtext/imageを実現するクリーナー/シンプルな方法はありますか？

Question

私は非常にプログラミングに新しいので、これを達成するためのより簡単な方法があるかどうかを知りたいと思います：左のテキストボックスと右の画像は両方とも整列しています。私は、ナビゲーションメニューのためにパディングトップを追加しました。より少ないコード行でこれを実行できましたか？

<div class="intro"> 
    <div id="text"> 
     <h2 id="head">Quiénes Somos</h2> 
     <p id="info"> text text text text</p> 
    </div> 

    <div id="image"> 
     <img id="obj" src="images/pyme.jpg"> 
    </div> 
</div> 

はここにCSSです：

.intro { 
    text-align: center; 
    padding-top: 135px; 
} 

.intro #text { 
    vertical-align: top; 
    width: 40%; 
    display: inline-block; 
    padding: 10px; 
    border: 1px solid black; 
} 

.intro #text #head { 
    background-color: #d45029; 
    text-align: left; 
    border-radius: 7px; 
} 

.intro #text #info { 
    margin-top: 10px; 
    text-indent: 50px; 
    text-align: justify; 
} 

.intro #image { 
    width: 40%; 
    display: inline-block; 
    padding:10px; 
    border: 1px solid black; 
} 

.intro #image #obj { 
    max-width: 100%; 
} 

そして、ここでフィドルlinkです。私はフロートを使用するほうがずっと簡単だと読んだことがあるが、私は試して失敗した。どんな助けでも大歓迎です。

Answer 1

私は通常このパーツにdisplay：blockとfloatを使用します。次に、私がやりたいことに基づいてマージンとパディングを微調整します。

HTML

<div class="divs-wrapper"> 
    <div class="div-1"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac dictum lectus, id tristique elit. Integer tincidunt sollicitudin magna a congue.</p> 
    </div> 
    <div class="div-2"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac dictum lectus, id tristique elit. Integer tincidunt sollicitudin magna a congue.</p> 
    </div> 
</div> 

CSS

.divs-wrapper { 
    width: 80%;/* width of wrapper */ 
    display: block;/* display block allows margin and width setting */ 
    margin: 0 auto;/* centers wrapper in 100% width body */ 
} 

.div-1 { 
    width: 49%;/* div 1 half width of wrapper */ 
    display: block;/* display block allows floats */ 
    float: left;/* float left to allow alignment of elements next to eachother */ 
    padding: .5%;/* padding for spacing */ 
} 

.div-2 { 
    width: 49%;/* div 2 half width of wrapper */ 
    display: block;/* display block allows floats */ 
    float: left;/* float left to allow alignment of elements next to eachother */ 
    padding: .5%;/* padding for spacing */ 
} 

マイデモ https://codepen.io/rw1982/pen/eWwZjB

あなたはHTMLとCSSに新しく追加され、あなたが列を設定する場合またはグリッドから応答性の高いレベルで作業します。これらのリンクを試してみてください。

応答グリッド http://www.responsivegridsystem.com/

Answer 2

divsはデフォルトでdisplay: blockです。つまり、幅が指定されていない場合（またはdisplayを別のものに変更した場合）、コンテナの全幅が伸びます。

あなたはフロートスタイルを使用したい場合、あなたはあなたにこのような何か残しており、個々のdiv要素のうち、すべてのコンテンツを取る必要があります。pとimgは、デフォルトでは、インラインであるため

<div class="intro"> 
    <img style = "float: right; max-width: 50%" id="obj" src="http://i.imgur.com/8EL2PCM.jpg"> 
    <h2 id="head">text text</h2> 
    <p id="info"> text text text text text text</p> 
</div> 

を、彼らはドン彼らは必要以上のスペースを取らない。画像のインラインにスタイルを設定していることに注意してください。同じ効果を得るためにこれらをスタイルシートに移動することができます。画像はデフォルトで実際のサイズでレンダリングされるため、max-widthを50％に設定しています。使用しているイメージがすでにレンダリングしたいサイズになっている場合は、これを行う必要はありません。

divではなく、すべてのテキストにスタイルを適用する場合は、テキストをのデフォルトのdisplay: inline要素にラップします。または、pタグのクラスまたはIDを指定するだけです。これらはdisplay:inlineです。