Why different language will influence html layout?

Question

Here is my messageboard project, I don't know why the different will influence my css layout...

I just test english,chinese,thai they both work great, but only japanese will destroy my css style..

I use en_US,ja_JP,zh_TW,th_TH php file to change language

When use English

When use japanese

<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>

And this is my css code

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

Answer 1

You should add new div inside .board_list this class and add css property clear:both;

Something like this :

Also read this article : https://www.w3schools.com/cssref/pr_class_clear.asp