2つのdivを隣り合わせに配置しようとすると、次のHTMLが書かれています。2つのdivを互いに隣接して配置する方法
<div id='wrapper' style='text-align:center;'>
<div style='float:left;'>
Lorem ipsum<br />
dolor sit amet
</div>
<div style='float:left;'>
Lorem ipsum<br />
dolor sit amet
</div>
</div>
しかし、私が書いたコードでは、2つのdivの浮動小数点が左端に表示されます。これが正しく機能するかどうかは、2つのdivを並べて浮動させることです。
は私が側で2つのdiv要素の側を中央に変更するには何が必要ですか？
あなたは自動的にあなたのラッパーのdivにあなたのCSSで
<div id="wrapper"></div>
をマージン、おそらく特定の幅を設定する必要があります：
#wrapper {
width: 70%;
margin: 0 auto;
}
あなたは事前に、両方のdiv Sの幅を知っていますか？もしそうなら、あなただけ
<div class="wrapper" style="margin: 0 auto; width: 200px">
<div class="inner1" style="width: 100px; float:left;"></div>
<div class="inner2" style="width: 100px; margin-left: 100px"></div>
</div>
ような何かを行うことができ、これを試してみてください：
<div id='wrapper' style='text-align:center;'>
<div style='float:left;background-color:red;width:50%'>
Lorem ipsum<br />dolor sit amet
</div>
<div style='float:right;background-color:blue;width:50%'>
Lorem ipsum<br />dolor sit amet
</div>
</div>
float: leftを使用しての
+1。 'float：left'と' float：right'の値はすべて、余分なラッピングとCSSなしで必要です。 – dk123
は、display: inline-blockを使用します。
<div id='wrapper' style='text-align: center;'>
<div style='display: inline-block; vertical-align: top;'>
Lorem ipsum<br />
dolor sit amet,<br />
consectetur adipisicing elit
</div>
<div style='display: inline-block; vertical-align: top;'>
Lorem ipsum<br />
dolor sit amet
</div>
</div>
それぞれのトップを内部divは、 vertical-align: top。
例：左のdivのためにhttp://jsfiddle.net/hCV8f/1/
'display：inline-block'は必ずしも動作しているわけではありませんが、最初にチェックする必要があります。 –
それは動作します。左右のdivの内容があまりにも大きくないことを確認してください。一つの例。右側のセクションに多くのテキストがある場合は、テキストをラップするために固定幅を与えます。 – dreamerkumar
、左マージンを設定します。右のdivの場合は、右に設定します。このように：
#leftDiv {
margin-left: auto;
}
#rightDiv {
margin-right: auto;
}
これにより、画面の中央に戻って配置されます。コードの下
Zebra GC420dプリンタで正常に動作します：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<style type="text/css">
html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; }
#div { min-height: 100%; }
</style>
</head>
<body>
<div style="border: 0px solid red;">
<table border="0" width="100%" align="center">
<tr>
<td style="text-align: center;">
<?php
echo $name;
?>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td style="text-align: center;">
<?php
echo 'https://goo.gl/2QvRXf';
?>
</td>
</tr>
</table>
</div>
</body>
</html>
はそれが役に立てば幸い！
私はあなたが言っていることを理解しています。なぜ「マージン」に2つの値があるのでしょうか？ –
基本的に、マージンは[上、右、下、左]に4つまでの値を設定できます。 2つの値を使用すると、[上下左右の]マージンを設定します（左右に設定すると自動に設定されます）。 – Daff
私はまったく同じ問題を抱えていて、私はあなたの解決策を試しました：http://jsfiddle.net/6ARJX/9/私のために働いていませんでした。なにか提案を？ –