サークルとDivs

Question

小さなタイムラインを作成しようとしました。左の円と年と右のサイトに直接何が起こったのですか。私は円に右のサイト上のすべてのテキストボックスを設定することができる方法

1）：

<div class="circle-singleline"> 
    2017 
</div> 
<div class="text"> 
    sdfs df sdfg sdf gsd fg sdf g sdfg sdfg sdfg 
</div> 

<div class="circle-singleline"> 
    2016 
</div> 
<div class="text"> 
    sdfs df sdfg sdf gsd fg sdf g sdfg sdfg sdfg 
</div> 
<div class="circle-singleline"> 
    2015 
</div> 
<div class="text"> 
    sdfs df 

sdfg sdf gsd fg sdf g sdfg sdfg sdfg 
</div> 

CSS

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'); 
div { 
    margin: 20px; 
} 

.circle-singleline { 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    font-size: 15px; 
    line-height: 50px; 
    text-align: center; 
    border: 2px solid #646464; 
    color: #000; 
} 

.text { 
    border: 1px solid #646464; 
    padding: 5px; 
    position: absolute; 
    top: 5px; 
    left: 75px; 
} 

https://jsfiddle.net/ubgjbpog/

は今、私は2つの問題がありますか？

2）左側に小さな矢印が表示されます。 ...それが最善の方法ではありませんが、絶対：

おかげ

Answer 1

あなたの質問は、あなたが言及した矢印のような設計手法を検討する場合は特に、いくつかの可能な答えを持っています。私はここに定型化されたファッションは、あなたが探していたものであるかどうかわからないんだけど、それは内年/テキストを整列するfloatを使用しています

.circle-timeline, 
 
.circle-timeline .item { 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
.circle-timeline, 
 
.circle-timeline .item, 
 
.circle-timeline .year, 
 
.circle-timeline .text { 
 
    box-sizing: border-box; 
 
} 
 

 
.circle-timeline .item { 
 
    margin: 10px 0; 
 
} 
 

 
.circle-timeline .year, 
 
.circle-timeline .text { 
 
    float: left; 
 
    padding: 15px 0; 
 
    background: #fff; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.circle-timeline .year { 
 
    text-align: center; 
 
    width: 50px; 
 
    border-radius: 999px; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.circle-timeline .year:after { 
 
    position: absolute; 
 
    content: " "; 
 
    width: 0; 
 
    height: 0; 
 
    right: -6px; 
 
    top: 40%; 
 
    border-style: solid; 
 
    border-width: 4px 0 4px 6px; 
 
    border-color: transparent transparent transparent #cccccc; 
 
} 
 

 
.circle-timeline .text { 
 
    padding: 5px; 
 
    padding-left: 40px; 
 
    margin: 10px; 
 
    margin-left: -25px; 
 
    border-radius: 6px; 
 
    width: calc(100% - 50px); 
 
}

<div class="circle-timeline"> 
 
\t <div class="item"> 
 
\t \t <div class="year">2017</div> 
 
\t \t <div class="text">Lorem ipsum dolor sit amet...</div> 
 
\t </div> 
 

 
\t <div class="item"> 
 
\t \t <div class="year">2016</div> 
 
\t \t <div class="text">Lorem ipsum dolor sit amet...</div> 
 
\t </div> 
 

 
\t <div class="item"> 
 
\t \t <div class="year">2015</div> 
 
\t \t <div class="text">Lorem ipsum dolor sit amet...</div> 
 
\t </div> 
 
</div>

：私は少し異なる構文でこれに近づくだろうそれぞれ.itemであり、矢印は疑似クラス:afterとして生成されます。

Answer 2

あなたがポジションを持っていました。

それぞれの「パッケージ」の周りにラッパーを置き、ラップトップにその物をインラインブロックとして表示します。

矢印について私はあなたが何をしているのかはわかりませんが、ラッパーdivに最初に別の要素を追加して表示することもできます：インラインブロックでも、 。

<div class="wrapper"> 
    <div class="arrow"> 
    </div> 
    <div class="circle-singleline"> 
     Inside Circle 
    </div> 
    <div class="text"> 
     Inside textBox 
    </div> 
</div> 

CSS：

.wrapper + .wrapper{ 
    margin-top: 10px; 
} 

.circle-singleline { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    font-size: 15px; 
    line-height: 50px; 
    text-align: center; 
    border: 2px solid #646464; 
    color: #000; 
} 

.text { 
    position: relative; 
    display: inline-block; 
    border: 1px solid #646464; 
    padding: 5px; 
    left: 10px; 
} 

.arrow{ 
    display: inline-block; 
} 

がここにフィドルを操作（矢印なし） https://jsfiddle.net/ubgjbpog/4/

Answer 3

1）右のサイトのすべてのテキストボックスをサークルに設定するにはどうすればよいですか？ - あなたができる

position: absolute; 
top: 5px; 
left: 75px; 

それらのすべてbody要素の左側から上部と75pxから5pxのことへと互いの上に積層されるようになります：あなたは.textに追加したスタイルが

あなたのフィドルでは、それがただ一つの.text要素であるように思われることに気づくでしょう。このような状況でposition: absoluteを使用することにより、それが動作する方法に、非常にunadvisedです：

絶対： 要素は、通常の文書の流れから削除されます。ページレイアウト内のエレメントにスペースが作成されません。その代わりに、その最も近い位置にある祖先（存在する場合）に対して相対的に配置されます。それ以外の場合は、それを最初の包含ブロックに対して相対的に配置します。その最終位置は、上、右、下、左の値によって決まります。この値は、z-indexの値がautoではない場合に新しいスタッキングコンテキストを作成します。絶対配置されたボックスは余白を持つことができ、他の余白と一緒に折り畳まれることはありません。 （MDNから撮影。 ）つまり

を、あなたはposition: absoluteを使用し続ける場合は、手動でtopとleftを通じて各.textの位置を調整する必要があります、各要素が異なる値を受け取る必要があります、 .text要素の内容が変更されるたびに変更する必要があります。また、このソリューションでは、異なるデバイスやブラウザなどで要素を別々にレンダリングする可能性があり、手動で要素を配置しなければならない作業がすべて無駄になる可能性があるため、まったく反応しません。あなたは、CSS自体が非常にうまくいく仕事をしてしまうでしょう。これを解決する

私の最高の提案は、別のdivに.circle-singlelineと.textのすべてのペアをラップです：

<div class="item"> 
    <div class="circle-singleline">2011</div> 
    <div class="text">Text for 2011 goes here.</div> 
</div> 


<div class="item"> 
    <div class="circle-singleline">2012</div> 
    <div class="text">Text for 2012 goes here.</div> 
</div> 


<div class="item"> 
    <div class="circle-singleline">2013</div> 
    <div class="text">Text for 2013 goes here.</div> 
</div> 

そして、このようなものにするためにCSS：

div.item{ 
    margin: 20px; 
    width: 100%; 
} 

div.item > .circle-singleline { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    font-size: 15px; 
    line-height: 50px; 
    text-align: center; 
    border: 2px solid #646464; 
    color: #000; 
} 

div.item > .text { 
    display: inline-block; 
    border: 1px solid #646464; 
    padding: 5px; 
} 

divとしての要素がdisplay: blockを持っていますデフォルトでは、互いに隣り合うようにdisplay: inline-blockを追加します。

---

2）どのように左側に小さな矢印を取得しますか？

今、あなたのタイムラインの各年は1ラッピング要素を持っていることを、あなたはこのように、あなたが望むの矢印を含む、それに:beforeを追加することができます。

div.item:before { 
    display: inline; 
    content:'\003E'; 
} 

は、すべてのこれらのソリューションで、このJSFiddleをチェックしてください。