Question

我面临一些显示模块的问题，我已经简化了这里。

.parent
{
  width:200px;
  border: 1px solid black;
  background-color: #cccccc;
}

.first
{
  border: 1px solid black;
  float: left;
  width:30px;
}

.second
{
  border: 1px solid black;
  display: inline-block;
  background-color:white;
}

<div class="parent">
<span class="first">first</span>
<span class="second">second</span>
</div>

改进这个问题，之前的问题非常混乱。在上面的代码段中，.second宽度仅限于其内容。我希望.second扩展到父容器.parent的末尾。我尝试使用display: block代替inline-block代替.second，但它不起作用。请建议怎么做？

Answer 1

如果我明白你的意思，你可以使用overflow:hidden，当你使用<span>时，你需要添加display:block。附加 display:block如果是div

，则无需

.second
{
  border: 1px solid black;
  background-color:white;
  overflow:hidden;
  display : block;
}

.parent
{
  width:200px;
  border: 1px solid black;
  background-color: #cccccc;
}

.first
{
  border: 1px solid black;
  float: left;
  width:30px;
}

.second
{
  border: 1px solid black;
  background-color:white;
  overflow:hidden;
  display : block;
}

<强> 演示

<div class="parent">
  <span class="first">first</span>
  <span class="second">second</span>
</div>

<android.support.v4.widget.SwipeRefreshLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/mSwipeRefresh">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/mRecyclerView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollbars="vertical"/>

    </android.support.v4.widget.SwipeRefreshLayout>

显示块无法正常工作

1 个答案: