これらのdivの配置に役立つ必要があります...

「サイトボックスからリンクを作成」していますが、これらのdivを正しく配置できないようです。ほとんどの場合、正しいですが、タイトルが死んで中央に表示され、「リンクを作成」ボタンが検索ボックスと整列し、検索ボックスがより右側に表示されます。私はこれらを45分ほど手抜きしていましたが、w3のポジショニングを研究しましたが、それを得ることはできません。任意のポインタが役立ちます。これらのdivの配置に役立つ必要があります...

相続人jsfiddle

https://jsfiddle.net/j6pf08kn/1/

HTML

<body> 
    <div id="top_con"> 
     <div id="title_con"> 
      <a href="swfs/welcomeflash.swf" id="downLink" download="welcomeflash"> 
       <header id="title"> 
        Diff Lirl 
       </header> 
      </a> 
     </div> 
     <div id="share_con"> 
      <button id="share">Get a link!</button> 
      <textarea id="link"></textarea> 
     </div> 
    </div> 
</body>

CSS

html { 
    height: 100%; 
} 

body { 
    background-color: black; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

header { 
    margin: 0 auto; 
} 

#top_con { 
    width: 100%; 
    display: inline-block; 
} 

#share_con { 
    float: right; 
    width: 40%; 
    display: inline-block; 
} 

#link { 
    width: 50%; 
    resize: none; 
    margin-top: 3%; 
} 

#share {} 

#title_con { 
    width: 57%; 
    float: center; 
    display: inline-block; 
} 

#title { 
    font-family: "Arial Black", Gadget, sans-serif; 
    font-size: 48px; 
    text-align: right; 
    color: white; 
    cursor: pointer; 
} 

a { 
    text-decoration: none; 
    color: white; 
}

出典

2016-06-17 cosmichero2025

これを確認してください。簡単な質問：それぞれの要素の垂直方向の配置を互いにどのようにしたいのですか？同じ高さですか？ミドルズ？ボトムズ？ – MassDebates

私はそれらを同じ高さにして、それらを理想的な位置に水平に整列させたいと思っています。私はちょうどいつも物事を置く場所を決めるのが悪かったし、試してみるとCSSの位置を吸ってしまいます – cosmichero2025

ほぼ完了しました。申し訳ありませんが、デスクから離れる必要がありました。質問を削除しないでください！ – MassDebates

http://codepen.io/anon/pen/WxGepy

だから私はいくつかのことをやりました。今すぐリストする：

私は別のラッパーを投げました。
あなたのIDをクラスに置き換える自由を取った
ボックスシャドウを表示するためのコードにはコメントがあります。私はbox-sizingのためボーダーの代わりにそれらを好きで、エフェクトボーダーはボックスモデルにあります。
私の目が痛いので色を変えました。
私はtext-align:center;、最も顕著なのは、ここでいくつかのプロパティをfloat:left;を利用した、とdisplay:inline-block;
注：画面サイズがはるかに小さい取得するときにこれはかなり醜い内訳を持っています。応答性は最初の質問または範囲にはありませんでした。（要求された場合は追加できます）

html { 
    height: 100%; 
    width: 100%; 
} 

body { 
    background-color: #ccc; 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

a { 
    text-decoration: none; 
} 

* { 
    box-shadow: 0 0 15px 1px rgba(255, 0, 0, 0.4) inset, 0 0 0 1px rgba(0, 0, 255, 0.5); 
} 

.top_con { 
    text-align: center; 
} 

.inner_con { 
    display: inline-block; 
} 

.share_con { 
    padding: 1em; 
    display: inline-block; 
} 

.share_con, 
.title_con { 
    float: left; 
    position: relative; 
} 

.title { 
    font-family: "Arial Black", Gadget, sans-serif; 
    font-size: 48px; 
    color: white; 
    cursor: pointer; 
    margin: 0 1em; 
} 

.hide_my_ass { 
    visibility: hidden; 
} 

.share { 
    vertical-align: middle; 
} 

.link { 
    vertical-align: middle; 
}

<body> 
    <div class="top_con"> 
    <div class="inner_con"> 
     <div class="share_con hide_my_ass"> 
     <button class="share">Get a link!</button> 
     <textarea class="link"></textarea> 
     </div> 
     <div class="title_con"> 
     <a href="#" class="downLink"> 
      <header class="title"> 
      Diff Lirl 
      </header> 
     </a> 

     </div> 
     <div class="share_con"> 
     <button class="share">Get a link!</button> 
     <textarea class="link"></textarea> 
     </div> 
    </div> 
    </div> 
</body>

出典

2016-06-17 15:37:29 MassDebates

すごくやったよ！助けてくれてありがとう、もし私が改善したいのであれば、本当にこの種のものを落とす必要がある。とにかく私は感謝を送る：D – cosmichero2025

ボタンのデフォルトはdisplay: inline-blockを持っている、これはボタンが他の要素に合わせドロップしなくなり、私はそれをに設定しましたこのフィドルで3210：私もボタンをテキストエリアと同じマージントップを与えているhttps://jsfiddle.net/j6pf08kn/2/

、テキストエリア自体がmargin-right: 10%とfloat: rightを持って、あなたはあなたのニーズのようにそれをカスタマイズすることができます。

出典

2016-06-17 15:29:31

あなたはフィドルを参照し、これを試みることができる：

https://jsfiddle.net/j6pf08kn/4/

はリファクタリングの多くをしました：あなたはどのように勉強することをお勧めしますfloatと異なるdisplayプロパティが機能します。

出典

2016-06-17 15:40:55 OysterMaker

それは実際には本当によさそうだ！しかし、それは私が構築したサイトの他の部分とうまく行きません。私は努力に感謝します：D – cosmichero2025

問題はありません！サイトの残りの部分を見ることができましたが、あなたが探しているものが見つかったらうれしいです！幸運の仲間 – OysterMaker

これらのdivの配置に役立つ必要があります...

答えて

関連する問題