我们为什么不拥有box-sizing: margin-box;？通常当我们放入box-sizing: border-box;样式表时,我们真正意味着前者.
例:
假设我有一个2列页面布局.两列的宽度都是50%,但它们看起来有点难看,因为没有排水沟(中间有间隙); 下面是CSS:
.col2 {
width: 50%;
float: left;
}
要应用排水沟,您可能会认为我们可以在2列中的第一列上设置右边距; 这样的事情:
.col2:first-child {
margin-right: 24px;
}
但这会使第二列换行到新行,因为以下情况属实:
50% + 50% + 24px > 100%
box-sizing: margin-box;通过在元素的计算宽度中包含边距来解决此问题.如果不是更有用,我会发现这非常有用box-sizing: border-box;.
我有一个RecyclerView和一个活动ImageView.我正在使用它RecyclerView来水平显示图像列表.当我在点击图片RecyclerView将ImageView在活动中应显示图像的大局观.到目前为止一切正常.
现在活动还有两个ImageButtons:imageButton_left和imageButton_right.当我点击时imageButton_left,该图像ImageView应向左转,并且该缩略图RecyclerView应反映此更改.情况类似imageButton_right.
我能够旋转ImageView.但是,我怎么能旋转缩略图RecyclerView？我如何获得ViewHolder的ImageView？
码:
活动XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="vertical">
<ImageView
android:id="@+id/original_image"
android:layout_width="200dp"
android:layout_height="200dp"
android:scaleType="fitXY"
android:src="@drawable/image_not_available_2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:orientation="horizontal">
<ImageButton
android:id="@+id/imageButton_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:background="@drawable/rotate_left_icon" />
<ImageButton
android:id="@+id/imageButton_right"
android:layout_width="wrap_content" …我希望div总是位于其父div的右侧,所以我使用float:right.有用.
但我也希望它在插入时不影响其他内容,所以我使用position:absolute.
现在float:right不起作用,我的div总是在其父div的左边.我该怎么把它移到右边？
我的页面中有一个按钮,单击该按钮会div在屏幕中间显示(弹出式样式).
我使用以下CSS来居中div在屏幕中间:
.PopupPanel
{
border: solid 1px black;
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}
只要页面不向下滚动,此CSS就可以正常工作.
但是,如果我将按钮放在我的页面底部,当它被点击时,它div会显示在顶部,用户必须向上滚动才能查看该内容div.
我想知道如何div在屏幕中间显示,即使页面已滚动.
获取页面上元素相对于视口(而不是文档)的位置的正确方法是什么.jQuery.offset功能似乎有希望:
获取第一个元素的当前坐标,或者在匹配元素集中相对于文档设置每个元素的坐标.
但这与文件有关.是否存在相对于视口返回偏移量的等效方法？
如何将div定位到包含div的底部？
<style>
.outside {
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
.inside {
position: absolute;
bottom: 2px;
}
</style>
<div class="outside">
<div class="inside">inside</div>
</div>
此代码将文本"内部"放在页面底部.
我习惯使用jQuery.在我目前的项目中,我使用zepto.js.Zepto没有position()像jQuery那样提供方法.Zepto只附带offset().
知道如何使用纯js或Zepto检索容器相对于父级的偏移量吗？
我有以下代码:
<td style="position: relative; min-height: 60px; vertical-align: top;">
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
</td>
这根本不起作用.出于某种原因,在TD上没有读取位置:相对命令,并且通知DIV被放置在我页面底部的内容容器之外.我试图把TD的所有内容都放到DIV中,例如:
<td>
<div style="position: relative; min-height: 60px; vertical-align: top;">
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
</div>
</td>
但是,这会产生新问题.由于表格单元格内容的高度是可变的,因此通知DIV并不总是位于单元格的底部.如果表格单元格超出60px标记,但其他单元格都没有,那么在其他单元格中,通知DIV将向下移动60px,而不是在底部.
在RecyclerView上,我可以使用以下命令突然滚动到所选项目的顶部:
((LinearLayoutManager) recyclerView.getLayoutManager()).scrollToPositionWithOffset(position, 0);
但是,这突然将项目移动到顶部位置.我想顺利地移动到项目的顶部.
我也尝试过:
recyclerView.smoothScrollToPosition(position);
但它不能很好地工作,因为它不会将项目移动到选定的顶部位置.它只是滚动列表,直到位置上的项目可见.