スマホで横並びdiv

解決済

質問者：sakura_question
質問日時：2013/10/29 00:50
回答数：2件

お世話になっております。
スマートフォンでdivの横並びをしようとしたのですが、
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
</head>
<body>
<div style="height:30px;line-height:30px;width:100%;">
<div style="overflow:hidden;float:left;width:50px;">日付</div>
<div style="overflow:hidden;float:left;">本文</div>
</div>
</body>

とした場合、
本文が長いと日付の下に本文が来るようになってしまいます。
本文の末尾が消えてdivが横並びになるようにしたいのですが
良い方法はないでしょうか？

よろしくお願いします。
以上です。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2013/10/30 11:00

できるだけDIVは使わない。

使うときも「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」が原則です。HTML5では、より厳しく「Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html … )訳すと「適切な他の要素がないときの最後の手段としてdiv要素を使用することが強く奨励される。」」

　例えば、
<body>
　<div class="header">
　　ヘッダ
　</div>
　<div class="section">
　　<h2>タイトル</h2>
　　<dl>
　　　<dt>2013.08.29</dt>
　　　<dd>本文が長いと日付の下に本文が来るようになってしまいます。本文の末尾が消えてdivが横並びになるようにしたいのですが良い方法はないでしょうか？</dd>
　　　<dd>よろしくお願いします。</dd>
　　　<dt>2013.08.30</dt>
　　　<dd>本文が長いと日付の下に本文が来るようになってしまいます。本文の末尾が消えてdivが横並びになるようにしたいのですが良い方法はないでしょうか？</dd>
　　　<dd>よろしくお願いします。</dd>
　　</dl>
　</div>
と率直にHTMLを書いて、日付を左に表示したいとすれば、そのようにスタイルシートを書けばよいだけです。将来気が変わったら他のデザインにすることも容易です。
　別にdl(定義リスト)でなくても何でも良いです。
<div class="section">
　<h2>見出し</h2>
　<h3>2013.10.29</h3>
　<p></p>
　<h3>2013.10.29</h3>
　<p></p>
だろうが・・・・文書構造を示す最適なマークアップにすればよい。スタイルシートを使う目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」なのですから、好きにデザインできるのですよ。HTMLには構造しか書いてないので作るほうも、スタイルシートでデザインを変えるのも楽ですし・・・

★日付のfloatと本文のmarginを組み合わせてあります。
★ウィンドウ幅には依存しません。スマホ縦でも横でも、幅広のパソコンでも
　　ウィンドウ幅を変更してみましょう。
★タブは＿に置換してあるので戻す。

[HTML4.01strict]汎用(PC/スマホ兼用)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>タイトル</h2>
＿＿<dl>
＿＿＿<dt>2013.08.27</dt>
＿＿＿<dd>本文が長いと</dd>
＿＿＿<dt>2013.08.29</dt>
＿＿＿<dd>本文が長いと日付の下に本文が来るようになってしまいます。本文の末尾が消えてdivが横並びになるようにしたいのですが良い方法はないでしょうか？</dd>
＿＿＿<dd>よろしくお願いします。</dd>
＿＿＿<dt>2013.08.30</dt>
＿＿＿<dd>本文が長いと日付の下に本文が来るようになってしまいます。本文の末尾が消えてdivが横並びになるようにしたいのですが良い方法はないでしょうか？</dd>
＿＿＿<dd>よろしくお願いします。</dd>
＿＿</dl>
＿</div>＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-10-30</dd>
＿＿</dl>
＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

[HTML5]★スマホおよび、IE9以降のモダンブラウザ用
<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>タイトル</h2>
＿＿<dl>
＿＿＿<dt>2013.08.27</dt>
＿＿＿<dd>本文が長いと</dd>
＿＿＿<dt>2013.08.29</dt>
＿＿＿<dd>本文が長いと日付の下に本文が来るようになってしまいます。本文の末尾が消えてdivが横並びになるようにしたいのですが良い方法はないでしょうか？</dd>
＿＿＿<dd>よろしくお願いします。</dd>
＿＿＿<dt>2013.08.30</dt>
＿＿＿<dd>本文が長いと日付の下に本文が来るようになってしまいます。本文の末尾が消えてdivが横並びになるようにしたいのですが良い方法はないでしょうか？</dd>
＿＿＿<dd>よろしくお願いします。</dd>
＿＿</dl>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

大変詳しく書いてくださりありがとうございます。
このサンプルでは想定したようにできなかったのですが、
下記のようにしたら出来ました。
ORUKA1951様のサンプルをいじっていたら想定したようになりました。
ありがとうございます。

#section dl{
height:15px;
display: -webkit-box;　/* Safari,Google Chrome用 */
display: -moz-box;　/* Firefox用 */
}
#section dl dt{
width:90px;
}
#section dl dt,dl dd{
height:15px;
overflow:hidden;
margin:0;
}

<div id="section">
<dl>
<dt> 00:00:00</dt>
<dd>本文本文本文本文本文本文本文本文</dd>
</dl>
</div>

通報する

お礼日時：2013/10/31 02:42

No.1

回答者： chocotarosu
回答日時：2013/10/29 10:09

こんな感じでいかがでしょうか？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<style>
#information{ width:100%; }
#information div{ height:30px; line-height:30px; overflow:hidden; float:left; }
.clear { height:0; font-size:1px; line-height:0px; clear:both; }
</style>
</head>
<body>
<div id="information">
<div style="width:15%;">日付</div>
<div style="width:85%;">本文が入ります。本文が入ります。本文が入ります。本文が入ります。</div>
<div class="clear"></div>
</div>
</body>