私の作業場では、ホームページを丸々そっくりに作るという訓練をしています。
なので、文の改行位置も合わせることをしなければなりません。一応、指示者に改行位置を正確に合わせることは無駄だと言いましたが、聞き入れてくれませんでした。
家に持って帰って作業することやそのコードを公開することを指示者から禁止されています。
そういうわけで詳しいコードを貼ることができません
ただ、大まかなレイアウトの崩れであれば、家に帰って記憶を思い出して、コードを打つことも可能ですが、細かい改行位置までは記憶できません。
問題なのはflexで横並びした文の1行目に改行を合わせると1文字分前で違う行が切れます。
例えば、2番目のpタグの幅を任意指定した時に、
CSS
div{ display:flex; } div p+p[ width:〇〇px; }
HTML
<div> <img src="images/web.jpg" /> <div> <p>あいうえお</p> <p>あいうえおかきくけこさしすせそたちつてとはひふへほまみむめもらりるれろわおんあいうえおかきくけこさしすせそたちつてとはひふへほまみむめもらりるれろわおん </p> </div> </div>
あいうえお
あいうえおかきくけこさしすせそたちつて
とはひふへほまみむめもらりるれろわおん
あいうえおかきくけこさしすせそたちつ
てとはひふへほまみむめもらりるれろわおん
こういう感じで1行目が「て」できれるように幅を合わせると3行目の最後が「て」にならず「つ」できれることです。
逆に3行目を「て」できれるように幅を合わせると1行目の最後が「は」まで入るようになります。
あいうえお
あいうえおかきくけこさしすせそたちつてとは
ひふへほまみむめもらりるれろわおん
あいうえおかきくけこさしすせそたちつて
とはひふへほまみむめもらりるれろわおん
これは何が原因で起こるのでしょうか?
やはり同じ条件でコードを打ってみないと分からないでしょうか?
やってみたこと
見本の横並びがfloatで作られいるかと思い、floatとflexのboxで文章の改行される位置が違うかと思いコードを書いてみましたがダメでした。
Google検索でfloatとflexの文字の改行位置と調べてみましたがやはりこれもダメでした。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/02/03 19:47
2018/02/03 23:21
退会済みユーザー
2018/02/04 03:28