为什么不同的语言会影响html布局?

时间:2018-04-29 05:52:39

标签: html css

这是我的留言板项目,我不知道为什么不同会影响我的CSS布局......

我只是测试英语,中文,泰语他们都很棒,但只有日语才能破坏我的CSS风格..

我使用en_US,ja_JP,zh_TW,th_TH php文件来改变语言

使用英语时 enter image description here

使用日语时 enter image description here

<li class="board_list">
                    <div class="board_img">
                        <img class="board_icon" src="./static/icon/board_icon.svg" alt="board icon">
                    </div>
                    <div class="board_text">
                        <div class="board_title">
                          <span>
                            <a href="./board.php?board_id=1">
                              <span>This was just test the title length of board name</span>
                            </a>
                          </span>
                        </div>
                        <div class="board_info">
                          <p class="p1">投稿:26</p>
                        </div>
                    </div>
                    <div class="board_latest">
                        <div class="board_latest_title">
                            <span>最新の投稿 :</span>
                            <a href="./article.php?id=32" title="This was just test the title length of board name">This was just test the title length of board name</a>
                        </div>
                        <div class="board_latest_info">
                            <a href="./member.php?user=1" title="carry0987">
                                <span>carry0987,</span>
                            </a>
                            <span>2018-04-28</span>
                        </div>
                    </div>
                </li>
                <li class="board_list">
                    <div class="board_img">
                        <img class="board_icon" src="./static/icon/board_icon.svg" alt="board icon">
                    </div>
                    <div class="board_text">
                        <div class="board_title">
                          <span>
                            <a href="./board.php?board_id=2">
                              <span>Default</span>
                            </a>
                          </span>
                        </div>
                        <div class="board_info">
                          <p class="p1">投稿:6</p>
                        </div>
                    </div>
                    <div class="board_latest">
                        <div class="board_latest_title">
                            <span>最新の投稿 :</span>
                            <a href="./article.php?id=23" title="This was just test the title length of board name">This was just test the title length of board name</a>
                        </div>
                        <div class="board_latest_info">
                            <a href="./member.php?user=2" title="carry0987y">
                                <span>carry0987y,</span>
                            </a>
                            <span>2018-04-28</span>
                        </div>
                    </div>
                </li>

这是我的css代码

.board_list {
    border-width: 1px;
    border-style: solid;
    border-color: #E9E9E9;
}

1 个答案:

答案 0 :(得分:2)

您应该在 .board_list 此类中添加新div并添加css属性clear:both;

这样的事情:

enter image description here

另请阅读本文:https://www.w3schools.com/cssref/pr_class_clear.asp