htmlです3段組みわかりませんこんな感じにタイトルは囲ってそれにして左は一番空きが少なくてあ

解決済

質問者：Wohinfahrensie
質問日時：2023/01/08 02:03
回答数：3件

htmlです3段組みわかりません
こんな感じにタイトルは囲ってそれにして
左は一番空きが少なくて
あいつと打ち込んで
真ん中が一番空きが多くて
あいつ、わかる
とそれぞれ打ち込み
右がどいつ
わかると打ち込む

こんな感じでいいんで教えてくださいお願いします!

通報する

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

質問の本文を隠す

回答 (3件)

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

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2023/01/10 18:04

こんにちは

回答がつかないようなので・・・

＞こんな感じでいいんで教えてくださいお願いします!
ご質問が大雑把なので、「こんな感じ」で回答したところで参考にすらならないと思いますけれど・・
方法はいろいろあるので、何が質問者様のケースに適当なのかすらわかりません。
以下、一例です。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
header { padding: .6em; text-align: center; border: 2px solid gray; }
section { display: flex; height: 70vh; align-content: flex-end; }
section>div { width: 20%; padding: 0 1em; }
section>div:nth-child(2) { width: 47%;
border:1px solid gray; border-width: 0 1px; }
section>div:nth-child(3) { width: 33%; }
</style>
</head>
<body>
<header>それ</header>
<section>
<div><p>あいつ</div>
<div><p>あいつ<p>わかる</div>
<div><p>どいつ<p>わかる</div>
</section>
</body>
</html>

- 1
- 件

通報する

No.3

回答者： hateha2_goo
回答日時：2023/01/14 14:51

<dl>要素（dtとdd）かもしれないですね。

右クリック、ページのソース表示　で、あったりなかったりする。

<input>　、こんなのかもしれない。

- 0
- 件

通報する

No.2

回答者： duffer_dog
回答日時：2023/01/10 19:52

枠組みだけを書き出してみました。

全体を section でくくり表示幅は個々の数値で変更、タイトル行の下の div に style="display: flex;" を設定することで続く３つの div が横に並ぶコラムになります。
コンテンツや枠幅など装飾はご希望のように変更してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Title</title>
<link rel="stylesheet" href="./*.css">
</head>
<body>
<section style="text-align:center;width:50%">
<div style="border:1px solid black;padding:10px;">T i t l e</div>
<div style="display: flex;">
<div style="padding:10px;width:20%;background-color: greenyellow;">
First column
</div>
<div style="padding:10px;width:50%;background-color: yellow;">
Second column
</div>
<div style="padding:10px;width:30%;background-color: skyblue;">
Third column
</div>
</div>
</section>
</body>
</html>