- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一小段代码可以显示图像的缩略图,当您单击它们时,它们会显示每个图像的放大版本。它在 Google Chrome 中完美运行,但在 Firefox 中缩略图变大,因此它们不再适合一行(我使用百分比),我相信这一定是一个简单的修复,但遗憾的是我不知道它是什么。
这是我网站上的预览:
http://www.poipleshadow.com/Children-Charity-Blog-2014-02-February#CarnivalForTheChildren
我使用样式化的 radio 输入,对于那些不知道的人,输入之间不能有空格,否则出于某种原因会添加额外的边距!这花了一段时间才弄明白!!
不管怎样,每一个的宽度都是11.11%乘以9个缩略图应该达到99.99%。
我已经添加了完整的代码,但实际上只有单选框才是问题所在。
CSS
/* ********************** NEW GALLERY CODE ************************/
/* IMPORTANT - IN THE CODE THERE CAN'T BE
SPACE BETWEEN EACH INPUT (Eg New Lines)
AS IT MESSES WITH FORMAT OF THE DISPLAY */
.radiogallery {position:relative; width:100%; height:auto; padding:0; border:0; margin:0; overflow:hidden; background:none; text-align:center;} /*Bounding Box */
/* Use this border as the border to the image, the border on the label is for spacing instead of using a margin */
.radiogallery img { max-width: 100%; height:auto; padding:0; margin:0; border: 2px solid #eee; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/************************ Thumbnails ************************/
/* Use the Border to add spacing between the images */
.radiogallery label {display:inline-block; overflow:hidden; line-height:0; opacity:1; height:auto; margin:0; padding:0; margin-bottom:-4px; border: 2px solid #eee; cursor:pointer; background:none; box-sizing:border-box; } /* Thumbnails */
.radiogallery label.nine { width:11.11%; } /* Thumbnails (9 ACROSS)*/
.radiogallery input {display:none; } /* Check Box Selection Status (NOT SHOWN) */
.radiogallery input:checked + label img{opacity:1; border: 1px solid #09F; }
.radiogallery input.pics + label img:hover {opacity:1; border: 1px solid #09F; }
.radiogallery input:checked + label:hover {opacity:1; }
/************************ MAIN IMAGE (Hiding) ************************/
.radiogallery div.large {position:absolute;display:inline-block; left:0; top:730px; width:100%; height:auto; margin:auto; border:0; background:none; padding:0px; text-align:center; opacity:0; z-index:100; overflow:hidden;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s; }
/* Make Float:none so that image is centered */
.radiogallery div.large img { margin:auto; background:none; width:720px; width:auto; margin:0;
margin-top:10px; padding:2px; background:white; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #bbe3ff; float:none;}
/**************************************************** MAIN IMAGE (Showing) ****************************************************/
.radiogallery input#pic1:checked ~ div.pic1,
.radiogallery input#pic2:checked ~ div.pic2,
.radiogallery input#pic3:checked ~ div.pic3,
.radiogallery input#pic4:checked ~ div.pic4,
.radiogallery input#pic5:checked ~ div.pic5,
.radiogallery input#pic6:checked ~ div.pic6,
.radiogallery input#pic7:checked ~ div.pic7,
.radiogallery input#pic8:checked ~ div.pic8,
.radiogallery input#pic9:checked ~ div.pic9,
.radiogallery input#pic10:checked ~ div.pic10,
.radiogallery input#pic11:checked ~ div.pic11,
.radiogallery input#pic12:checked ~ div.pic12,
.radiogallery input#pic13:checked ~ div.pic13,
.radiogallery input#pic14:checked ~ div.pic14,
.radiogallery input#pic15:checked ~ div.pic15,
.radiogallery input#pic16:checked ~ div.pic16 {position:relative; opacity:1; z-index:100; top:10%; height:auto; margin:auto; padding:0; background:none; }
HTML
<div class="radiogallery">
<input type="radio" name="pic" id="pic1" class="pics" checked="checked"><label for="pic1" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-01.JPG" alt="Carnival and Goa Entertainers 1" width="960" height="720"></label><input type="radio" name="pic" id="pic2" class="pics"><label for="pic2" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-02.JPG" alt="Carnival and Goa Entertainers 2" width="960" height="720"></label><input type="radio" name="pic" id="pic3" class="pics"><label for="pic3" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-03.JPG" alt="Carnival and Goa Entertainers 3" width="960" height="720"></label><input type="radio" name="pic" id="pic4" class="pics"><label for="pic4" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-04.JPG" alt="Carnival and Goa Entertainers 4" width="960" height="720"></label><input type="radio" name="pic" id="pic5" class="pics"><label for="pic5" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-05.JPG" alt="Carnival and Goa Entertainers 5" width="960" height="720"></label><input type="radio" name="pic" id="pic6" class="pics"><label for="pic6" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-06.JPG" alt="Carnival and Goa Entertainers 6" width="960" height="720"></label><input type="radio" name="pic" id="pic7" class="pics"><label for="pic7" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-07.JPG" alt="Carnival and Goa Entertainers 7" width="960" height="720"></label><input type="radio" name="pic" id="pic8" class="pics"><label for="pic8" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-08.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></label><input type="radio" name="pic" id="pic9" class="pics"><label for="pic9" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-09.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></label>
<div class="pic1 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-01.JPG" alt="Carnival and Goa Entertainers 1" width="960" height="720"></div>
<div class="pic2 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-02.JPG" alt="Carnival and Goa Entertainers 2" width="960" height="720"></div>
<div class="pic3 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-03.JPG" alt="Carnival and Goa Entertainers 3" width="960" height="720"></div>
<div class="pic4 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-04.JPG" alt="Carnival and Goa Entertainers 4" width="960" height="720"></div>
<div class="pic5 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-05.JPG" alt="Carnival and Goa Entertainers 5" width="960" height="720"></div>
<div class="pic6 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-06.JPG" alt="Carnival and Goa Entertainers 6" width="960" height="720"></div>
<div class="pic7 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-07.JPG" alt="Carnival and Goa Entertainers 7" width="960" height="720"></div>
<div class="pic8 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-08.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></div>
<div class="pic9 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-09.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></div>
</div> <!-- end radiogroup -->
最佳答案
您在 CSS 中做了一些奇怪的事情。您将元素彼此相邻放置,使它们成为 inline-block
,并且您无缘无故地使这些元素的子元素成为 float:left;
。
您应该删除图像的 float (虽然这不是您当前的问题)问题是框大小,将其更改为边框框以计算边框到元素宽度。
将此添加到您的 CSS
.radiogallery,
.radiogallery * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
关于html - 图片库缩略图(radiogroup 输入)在 Firefox 中变大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21902745/
Android 上的动态表单可能非常困惑,我遇到过这种特殊情况,我通过 RadioGroup 和 AppCompatRadioButton 创建了一个选项列表,其中checkedId 与动态 Radi
我想实现如下图所示的Single RadioGroup 以进行血型选择。如何做到这一点? 最佳答案 我创建了自己的 RadioGridLayout,其中包含 RadioGroup 代码并扩展了 Gri
我有一个带有单选按钮的 RadioGroup。要清除选中的项目,我正在调用 radiogroup.clearCheck()。但是,RadioGroup.setOnCheckedChangeListen
我不知道为什么我的 RadioGroup 分隔线没有显示。有人请说明一下。我已经看过 Android radiogroup, divider between radiobuttons .
有没有办法将 radioGroup 设置为只读。我试过disabled: true,但这会在radioGroup上创建一个掩码,这使得它几乎不可读。关于如何将 extjs radioGroup 设置为
我有以下 HTML,我需要一个单选按钮。不确定如何在 AngularJS 中执行此操作。 Type of M (check one):
我在 RadioGroup Listener 上遇到问题,我对 Android 有点菜鸟,非常感谢您的帮助。 我有 5 个单选按钮,每个按钮都有不同的值。 下面是java代码 package com.
我上周刚刚开始学习,我对我书上的RadioGroup有一些疑问。 radioGroup.clearCheck(); radioGroup.setOnCheckedChangeListener(
我正在尝试为单选按钮(或可切换按钮)制作自定义样式,但我不知道它是否可以实现。 我的按钮的当前样式: 我想实现这样的目标 理想的风格: 一个加号是有一个动画,其中选定的颜色在按钮之间“滑动”。在 xm
我创建了一个 RadioGroup 并以编程方式向其添加 RadioButtons。问题是,运行时我可以选中所有选项,但无法取消选中它们。这是我的代码: optionsContaine
我的想法是让 ImageView - RadioButton 成对,每对包含在 LinearLayout(水平方向)和 ImageButtons 中,当选择并确认一个选项时,它们的背景颜色会改变。所以
我正在做一个应用程序,我必须在其中为初始选择的项目生成具有特定基值的复选框,然后更改它的值。那里没有什么很复杂的。 我的问题是当我重置布局时,我创建了一个新的 RadioGroup,其中包含新的 Ra
我正在尝试从单选组获取单选按钮文本,但问题是:它没有获得值。我搜索了其他链接,但对我没有帮助。 private EditText FirstName; private EditText
这是我在这个网站上的第一篇文章,我希望它做得很好。我试图在我的 radio 组中进行单一选择,但所有这些都被选中并且无法取消选中。我希望如果一个单选按钮被选中,其他的则保持未选中状态。到目前为止,这是
我正在尝试创建 2 行单选按钮,如下图所示。但是直接放在上面我的radio group就不行了线性布局。 我是安卓开发的新手。所以如果有更好的选择。欢迎他们 我的代码
我正在尝试创建一个 RadioGroup,如图所示。我希望一次只检查一个 RadioButton。 这就是我为实现这一目标所做的。
我想创建一个包含 RadioGroup 的自定义 View。在 RadioGroup 内部,我想设置 RadioButtons,以便第一个 RadioButton 位于左上角,第二个是在那之下,第一个
是否可以在自己的布局中拥有一个带有单选按钮的单选组?每个单选按钮都必须位于包含文本和图像的行中。我不会使用 ListView ,因为我只有 2 行。 最佳答案 方法如下: 在 XML 布局文件中的每个
我在我的应用程序上安装了一个带有三个单选按钮的单选按钮组,但我希望文本显示在它上面,就像复选框等一样。我可以像这样引用 strings.xml 文件吗?
我想给用户四个选择,第一个和第二个选择在一行,第三个和第四个选择在另一行。我的问题是当应用程序启动时我可以选择多个选项,但我不希望这样。这是我的 xml 布局:
我是一名优秀的程序员,十分优秀!