1
请参阅我的jsfiddle中的
图标？它保持原位，不管屏幕宽度如何都不会移动。难以让文字留在左边
但是，旁边的文本不是以相同的方式操作。
我希望文字在
图标旁边是正确的，即使div由于更改窗口宽度而导致隐藏某些文本而变得更小时也不会移动。
@charset "UTF-8";
.row {
\t width: 100%;
\t margin-top: 0px;
\t margin-right: 0px;
\t margin-bottom: 0px;
\t margin-left: 0px;
\t padding-top: 0px;
\t padding-right: 0px;
\t padding-bottom: 0px;
\t padding-left: 0px;
\t display: inline-block
}
.row.blockDisplay {
\t display: block;
}
.column_60 {
\t width: 55%;
\t float: left;
\t margin-top: 0px;
\t margin-left:1%;
}
.column_40 {
\t width: 44%;
\t float: left;
\t margin-top: 0px;
}
.columns {
\t width: 25%;
\t float: left;
\t font-family: "Source Sans Pro";
\t color: #A5A5A5;
\t line-height: 24px;
\t padding-top: 10px;
\t padding-bottom: 10px;
\t text-align: justify;
\t margin-top: 15px;
\t margin-bottom: 15px;
\t padding-left: 0px;
\t padding-right: 0px;
\t margin-left: 0px;
\t margin-right: 0px;
}
.row .columns p {
\t padding-left: 10%;
\t padding-right: 10%;
}
.left_half {
\t background-color: #52BAD5;
\t color: #FFFFFF;
\t font-family: "Source Sans Pro";
\t text-align: center;
\t font-weight: bold;
}
.right_half {
\t background-color: #01B2D1;
\t color: #FFFFFF;
\t font-family: "Source Sans Pro";
\t text-align: center;
\t font-weight: bold;
}
@media (max-width: 320px) {
.secondary_header {
\t margin-top: 0px;
\t margin-right: 0px;
\t margin-bottom: 0px;
\t margin-left: 0px;
\t padding-top: 1px;
\t padding-bottom: 40px;
}
.columns {
\t width: 100%;
\t margin-top: 0px;
\t margin-right: 0px;
\t margin-bottom: 0px;
\t margin-left: 0px;
\t padding-top: 0PX;
\t padding-right: 0PX;
\t padding-bottom: 0PX;
\t padding-left: 0PX;
}
.column_40.left_half {
\t width: 100%;
}
.column_60.right_half {
\t width: 100%;
}
}
@media (min-width: 321px) and (max-width: 768px) {
.columns {
\t width: 100%;
\t margin-top: 6px;
\t margin-right: 0px;
\t margin-bottom: 6px;
\t margin-left: 0px;
\t padding-top: 0px;
\t padding-right: 0px;
\t padding-bottom: 0px;
\t padding-left: 0px;
}
.column_40.left_half {
\t width: 100%;
}
.column_60.right_half {
\t width: 100%;
}
}
@media (min-width: 769px) and (max-width: 1000px) {
.columns {
\t width: 50%;
\t float: left;
\t padding-left: 0px;
\t padding-top: 0px;
\t padding-right: 0px;
\t padding-bottom: 0px;
}
.container .columns p {
\t padding-left: 25px;
\t padding-right: 25px;
}
}
.taskPreviewWrap{
\t list-style:none;
\t margin-left:-40px;
\t margin-top:-5px;
\t color:#194e8d;
\t }
.taskPreviewWrap li {
\t height:auto;
\t width:auto;
\t background:white;
\t border-radius:6px;
\t background-color:#011222;
\t padding-top:9px;
\t margin-top:5px;
\t }
.dragdotsicon{
\t width:7px;
\t height:20px;
\t background: url(http://s32.postimg.org/qlhqncer9/dragdots.png);
\t margin-left:14px;
\t margin-top:9px;
\t }
.t-Date {
\t font-weight:normal;
\t font-size:9pt;
\t font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
\t display:inline-block;
\t vertical-align: top;
\t position:relative;
\t margin-top:-17px;
\t margin-left:-197px;
\t letter-spacing:-0.4px;
\t }
.t-Date:after {
\t content:"";
\t width:1px;
\t height:29px;
\t background-color:#194e8d;
\t display: inline-block;
\t position:absolute;
\t margin-top:-8px;
\t margin-left:12px;
\t }
.t-ShortDesc{
font-weight:bold;
\t font-size:9pt;
\t letter-spacing:-0.2px;
\t font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
\t display:inline-block;
\t vertical-align: top;
\t position:absolute;
\t text-overflow: ellipsis; /* will make [...] at the end */
width: 22%; /* change to your preferences */
white-space: nowrap; /* paragraph to one line */
overflow:hidden; /* older browsers */
\t margin-left:24px;
\t margin-top:-17px;
\t }<div class="row"></div>
<div class="row blockDisplay">
<div class="column_40 left_half">
<ul class="taskPreviewWrap">
<li>
<div class="dragdotsicon"></div>
<span class="t-Date">05.18.16</span>
<span class="t-ShortDesc">I want everything in this line to stay to the left</span>
</li>
<li>
<div class="dragdotsicon"></div>
<span class="t-Date">05.18.16</span>
<span class="t-ShortDesc">I want everything in this line to stay to the left</span>
</li>
<li>
<div class="dragdotsicon"></div>
<span class="t-Date">05.18.16</span>
<span class="t-ShortDesc">I want everything in this line to stay to the left</span>
</li>
</ul>
</div>
<div class="column_60 right_half">
<h2 class="column_title">RIGHT COLUMN</h2>
</div>
</div>
感谢迈克尔！工作很好。感谢你的时间！ – Patrick