Question

我正在尝试列出我正在构建的任务列表，并且无法完成各项任务。核心布局包括左侧的任务和患者姓名，以及右侧的创建日期和逾期日期。

当右侧内容与左侧内容重叠时，问题就开始了。在除IE 6和IE之外的所有浏览器上7右边的内容只是低于左边的内容，例如

Title    Date Created
Patient Name
         Date Overdue

在IE 6＆amp; 7左右两边的内容都被挤压，好像另一个占据了所需的全部空间，即使它没有，例如。

Title            Date
              Created
Patient          Date 
Name          Overdue

之前有没有人做过类似的布局，并有关于如何解决这个问题的提示？是否有更好的方法来解决这个问题而不是使用花车？你喜欢IE吗？

目前我有以下HTML＆amp; CSS（使用SASS布局）或查看演示此问题的this jsFiddle。

<li class="task clear-fix">
  <span class="task-title">{title}</span>
  <span class="task-date secondary">{dateCreated}</span>
  <span class="patient-name">{patientName}</span>
  <span class="task-overdue-date">{dateOverdue}</span>
</li>

li.task {
    .task-title,
    .patient-name {
        clear: left;
        float: left;
    }
    .task-date,
    .task-overdue-date {
        clear: right;
        float: right;
    }
}
.clear-fix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clear-fix {
    *zoom: 1; /* IE 6 & 7 only */
}

Answer 1

您是否尝试过以下操作？

span {
    white-space: nowrap;
}

Answer 2

this怎么办？

HTML结构：

<ul>
  <li class="task">
    <div class="line">
      <span class="task-date">Date Created</span>
      <span class="task-title">Task Title</span>
    </div>
    <div class="line">
      <span class="task-due-date overdue">Date Overdue</span>
      <span class="patient-name">Patient Name</span>
    </div>
  </li>
</ul>

CSS：

.task {
  border: 1px solid red;
  min-height: 3em;
  width: 200px;
  padding: 0px;
}

.patient-name {
  font-weight: bold;
}

.task .task-date {
  float: right;
}

.line .task-due-date {
  float: right;
}

.task .overdue {
  color: red;
}

Answer 3

这适用于你的jsfiddle例子。

<div class="task clear-fix">
    <div class="task-title">Title</span>
    <div class="task-date secondary">Date Created</div>
    <div class="patient-name">Patient Name</div>
    <div class="task-overdue-date">Date Overdue</div>
</div>

另外：之前和之后：不工作，即6或7。而是为兼容性创建一个明确的div。

<div class="task clear-fix">
        <div class="task-title">Title</span>
        <div class="task-date secondary">Date Created</div>
        <div class="patient-name">Patient Name</div>
        <div class="task-overdue-date">Date Overdue</div>
    </div>    
<div class="clear"></div>

.clear
{
    clear: both;
}

如何在IE 6＆amp ;;上修复我的CSS浮动7？或者我怎样才能更好地解决这个问题呢？

3 个答案: