html - 页脚栏不起作用

Question

我在里面有一个页脚，我有 2 个 div，第 1 列和第 2 列

我添加了最大宽度并内联显示，希望结果是这样的:

-----------------------------
|aaaaaaaaaaaaa|aaaaaaaaaaaaa|
|aaaaaaaaaaaaa|aaaaaaaaaaaaa|
|aaaaaaaaaaaaa|aaaaaaaaaaaaa|
-----------------------------

但是当我添加一个长字符串时，一切都变得不对劲了，我什至添加了中断词，我是不是漏掉了什么？

HTML 部分:

<div id='generated_footer_date' style='background-color:$backgroundColor; color:$fontColor; opacity: $opacity; height:auto;'>
    <div class='column1of2'>ddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfd</div>
    <div class='column2of2'>column2of2ddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfd</div>
</div>

CSS 部分:

.column1of2 {
    display: inline;
    word-wrap: break-word;
    height: auto;
    width: 200px !important;
    height: auto;
    padding-right: 20%;
}

.column2of2 {
   display:inline;
   word-wrap: break-word;
   height:auto;
   width:200px;
}

#generated_footer_date {
   color:#ffffff;
   background-color:black;
   opacity: 1;
   width:100%;
   text-align:center;
   padding-top:15px;
   padding-bottom:15px;
   word-wrap: break-word; 
   height:50px auto;
   font-family: 'Raleway', sans-serif;
}

https://jsfiddle.net/wzfyj2z4/1/

Answer 1

首先，内联元素并没有像您预期的那样工作。需要 display: inline-block 所有列。

另一面是word-wrap，你需要word-break : break-all。

通过这两个更改，它可以完美地工作:

https://jsfiddle.net/wzfyj2z4/2/