文字列を２列で表示したい

文字列を２列で表示したいです。画像載せます。

これを

こうしたいです。

y_waiwai

2020/04/30 23:52

これだけでは意味不明ですせめてコードぐらいは提示しましょうよ。

nekora

2020/05/01 00:37

本当に初心者でコードの書き方から分からないんだと思いますよ。たぶん画像にしたのは、これwordかなにかで打ち込んだのを貼り付けてるんじゃないかな。全員が全員コードが書けるとは思わず、意図を汲んでコードを提示するのも「初心者」相手なら必要だと思いますよ。

行動規範の内容に同意します

回答3件

タグに Bootstrap が付いているので、それを使うなら、

html
1<div class="container">
2  <div class ="row">
3    <div class="col-sm">
4      <h2>Airbnbでホストするこれだけの理由</h2>
5      <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
6    </div>
7    <div class="col-sm">
8      <h2>困ったときも安心</h2>
9      <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
10    </div>
11  </div>
12</div>

投稿2020/05/01 01:24

総合スコア34075

2020/05/01 01:44

あうち＞＜　Bootstrapを見落としてました。またトンチンカンな回答つけてしまった。消せないから恥がのこるんだよね・・・とりあえず、高評価付けさせていただきます。

hatena19

2020/05/01 02:31

いろいろな方法があるので、CSSのみの方法も知っておいて損はないですよね。その方か自由度か高いし。

行動規範の内容に同意します

ベストアンサー

こんな感じかな？

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta  charset="UTF-8">
5<title>2列表示</title>
6<style>
7
8    body {
9        margin: 0;
10        padding: 0;
11    }
12
13    .flex_div {
14        display: flex;
15        justify-content: center;
16    }
17
18    .first_div {
19    display: inline-block;
20    width: 33%;
21    padding:10px;
22    margin: 0 10px 0 0;
23    }
24    
25    .second_div {
26    display: inline-block;
27    width: 35%;
28    padding:10px;
29    margin: 0 10px 0 0;
30    }
31
32    h2 {
33    font-size:16pt;
34    font-weight: bold;
35    margin: 0 0 10px;
36    }
37    
38    p {
39    font-size:12pt;
40    line-height: 25px;
41    }
42</style>
43    
44</head>
45
46<body>
47<div class="flex_div">
48    <div class="first_div">
49        <h2>Airbnbでホストするこれだけの理由</h2>
50        <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
51    </div>
52    <div class="second_div">
53        <h2>困ったときも安心</h2>
54        <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
55    </div>
56</div>
57</body>
58</html>

投稿2020/05/01 00:29

nekora

総合スコア501

writegrint

2020/05/01 01:34

一部を引用したらいい感じになりました！ありがとです！

行動規範の内容に同意します

<div class="flex_div">
    <div class="first_div">
      <h2  style="text-align:center" class="size2" ><b>Airbnbでホストするこれだけの理由</b></h2>
      <p style="text-align:center">どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
    </div>
    <div class="second_div">
      <h2 style="text-align:center" class="size3"><b>困った時も安心</b></h2>
      <p style="text-align:center">万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
    </div>
</div>
コード

投稿2020/05/01 15:24

writegrint

総合スコア22