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/

Answer 2

试试这个 CSS ，

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

.column2of2 {
float:left;
word-wrap: break-word;
  height:auto;
  width:200px;
}

#generated_footer_date {
float:left;
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/kushan/pyf5s0L8/

Answer 3

将以下css用于class.Hope It Helps。。。。

display:inline-block;
position:relative;

页脚列不起作用

3 个答案: