我想在一行中显示4个flipbox，但在我的代码中仅显示1个
要在一行中显示4个flipbox，可以使用以下方法：
- 使用CSS的flexbox布局：将flipbox元素包裹在一个父容器中，并将父容器的display属性设置为flex。然后，将父容器的flex-wrap属性设置为wrap，这样当容器宽度不足以容纳所有flipbox时，会自动换行。最后，设置每个flipbox的宽度为25%（或根据需要调整），这样就可以在一行中显示4个flipbox。
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.flipbox {
width: 25%;
/* 其他样式属性 */
}
</style>
<div class="container">
<div class="flipbox">Flipbox 1</div>
<div class="flipbox">Flipbox 2</div>
<div class="flipbox">Flipbox 3</div>
<div class="flipbox">Flipbox 4</div>
</div>- 使用CSS的grid布局：将flipbox元素包裹在一个父容器中，并将父容器的display属性设置为grid。然后，将父容器的grid-template-columns属性设置为repeat(4, 1fr)，这样父容器会被分成4列，并且每列的宽度平均分配。最后，设置每个flipbox的样式，使其填充父容器的每个单元格。
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* 其他样式属性 */
}
.flipbox {
/* 其他样式属性 */
}
</style>
<div class="container">
<div class="flipbox">Flipbox 1</div>
<div class="flipbox">Flipbox 2</div>
<div class="flipbox">Flipbox 3</div>
<div class="flipbox">Flipbox 4</div>
</div>以上两种方法都可以实现在一行中显示4个flipbox。根据具体需求和使用场景，选择适合的布局方式即可。
关于腾讯云相关产品和产品介绍链接地址，可以参考腾讯云官方文档或网站进行查询。
相关·内容
我使用的是，但无法让它在一行中显示多个日期输入。这是我最接近的：
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<label for="fromDate">
From
</label>
<input data-theme="c" name="
浏览 6提问于2013-11-26得票数 1
回答已采纳
1回答
其实我不是程序员，我是一个designer...many而不是那些回答这个问题的人.
我在翻转插件上应用显示和隐藏内容有困难.....
var init = function(){
$("#flipTop").click(function(e){
$("#flipbox").flip({
dir: "top",
endColor: "white",
d
浏览 0提问于2011-02-10得票数 0
我正在尝试修改jquery-mobile-datebox的flipbox的显示顺序，但我找不到任何相同的选项。我正在尝试通过jquery来做这件事，但我仍然认为在flipbox中可能会有一个选择。
下面是供参考的图片。
下图显示了默认弹出窗口
我需要弹出窗口显示日期|月|年，如红色边框所示
我希望有人能在这方面帮助我！
浏览 3提问于2012-09-14得票数 4
大家好，我正在尝试创建一个自定义的聚合物元素，它在其模板标记中使用< x-flipbox >元素。
然而，< x-flipbox >标记似乎只在索引页面上工作，而不是在我的自定义元素中。
这是我的自定义元素，我哪里做错了？
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/x-tag-imports/x-tag-flipb
浏览 0提问于2014-07-24得票数 0
我正在尝试在dreamweaver中运行下面显示的代码。但是，我不明白为什么第7行会有错误。Dreamweaver没有指出错误所在。请给我建议。位于“verso:”处的错误。
$(document).ready(function(e) {
$('#btn-left').click(function(e) {
$(".flipbox1").flippy({
color_target: "red",
direction: "left",
du
浏览 2提问于2014-01-27得票数 0
1回答
因此，请查看以下内容：
点击“查看歌曲列表”链接，专辑封面翻转，显示专辑的歌曲列表。该链接的名称将更改为“查看相册图片”。单击“查看相册图片”链接，相册将翻转以再次显示正面。该链接的名称将更改回“查看歌曲列表”。
现在，再次点击“查看歌曲列表”链接。我想让它再次翻转专辑，但它没有。有人知道我怎么解决这个问题吗？
此外，翻转动画显示在div中的其他“隐藏”相册上。有没有人也知道怎么解决这个问题？
这是我的jQuery：
$(function(){
$(".flipPad a.viewSongList").bind("click",function(){
$(&#
浏览 1提问于2013-04-28得票数 1
回答已采纳
1回答
我想用JQM插件显示一个设备特定的数据选择器。
默认情况下，AngularJS视图包含日期框模式选项为- "datebox“。如果设备是iPhone，则应该将其更改为“flipbox”。
使用下列不起作用的代码：
$("#Date1").data('options', '{"mode": "flipbox", "useNewStyle":true}')
$('#Date1').trigger('datebox', { 'method':
浏览 5提问于2013-10-31得票数 0
回答已采纳
1回答
我正在使用插件在单击时翻转div，并在用户再次单击该div时恢复翻转。下面的代码使DIV翻转，但当您再次单击它时不会将其翻转回来。
JavaScript
$(function(){
$("#flipbox").bind("click",function(){
$("#flipbox").flip({
direction:'rl',
content:'this is my new content',
onEnd: function(){
浏览 0提问于2013-03-01得票数 0
回答已采纳
1回答
我需要您的帮助，创建一个自定义内容元素。我用的是TYPO3。10.4.21我添加了扩展(fluid_styled_content和sitepackage)。
我可以为下拉列表创建一个向导和内容类型(CType)，但是如果我允许在前端(websie)显示我的内容元素，那么会出现一个错误：Oops, an error occurred! Code: 202111110917379495faab。
可能是模板path...but出错了，我不知道如何修复它。
从现在开始我做了：
ext_localconf.php中的添加数据银行
CREATE TABLE tt_content (
code_l
浏览 1提问于2021-11-11得票数 0
回答已采纳
我试图创建一个滑块后，磁弹出是打开与，我面临的问题是，我得到了所有的索引元素在第一页，和Flipbox应该读取每个索引作为(边)，但不工作。
那么，我如何才能将每个帖子作为一个侧面从Magnific实例中获取呢？
我非常感谢你的帮助。
jQuery(document).ready( function($) {
var $button = $(".popup-modal-story");
var $modal = $(".box");
$button.on("click", function (event) {
浏览 6提问于2019-07-02得票数 0
2回答
我正在尝试创建一个开门和关门的动画，但是在某个地方我犯了一个错误，左上角和左下角看起来不像我想要的，也许有人知道问题出在哪里，这是我的代码 .container{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.flipbox{
height: 420px;
width: 240px;
border: 18px solid grey;
}
.flipbox-active{
height: 420px;
w
浏览 25提问于2019-03-21得票数 1
回答已采纳
我正在尝试使用这个flip插件：，但是我不能让它像想要的那样工作。
这是可行的：
<div class="flip" id="flipbox2" onclick="doFlip();">
Flip me!
</div>
<script type="text/javascript">
var $flipbox = $('#flipbox2');
function doFlip() {
$flipbox.flip({
浏览 0提问于2013-08-27得票数 0
我使用的是来自shinydashboardPlus的shinydashboardPlus，对于我的第一个flipBox，一切都很好，从第二个flipBox开始，我就可以从正面看到返回内容。我不明白为什么，因为第一个flipBox和其他的代码是相同的。
提前谢谢。
浏览 4提问于2020-03-20得票数 0
回答已采纳
我在让flipbox工作时遇到了问题。它显示了，但是我根本不能让日/月/年滚动或移动。它被冻住了。
如果我将模式更改为timeflipbox或durationflipbox，也是一样--当我单击它们时，它们会显示出来，但对任何鼠标或键盘操作都没有反应。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-s
浏览 11提问于2015-09-22得票数 0
2回答
CSS3棱镜动画故障
、、、
我正在做一个关于CSS3的实验项目，webkit浏览器中的3D动画，除了我的3边棱镜的最后位置之外，所有东西都工作得很好。
是代码的小提琴。
日历视图端口在动画之后最适合红色边框。
这个id是我的css，它对动画进行了分类：
.flipbox-container {
-webkit-perspective: 400px;
position: relative;
margin: 0 auto;
width: 200px;
height: 90px;
border: 1px solid red;
}
.flipbox-container .flipw
浏览 6提问于2013-07-28得票数 0
描述:我有很多类名为的div
<div class="flipbox1">,<div class="flipbox2">,
<div class="flipbox3">,<div class="flipbox4">
等。
我选择的div如下：
$(document).ready(function(){
var id=$('#img-txt a').attr('id').replace('flip',
浏览 3提问于2013-09-08得票数 2
1回答
如何使用翻转插件切换悬停时的图像
、、、、
我想知道如何使用此使3d翻转过渡与IE9兼容(客户要求)。我可以让它工作，但我有两个pngs，我想在鼠标悬停时从rollover1.png切换到rollover2.png。到目前为止，它已经完成了rollover1.png
<!DOCTYPE html>
<html>
<style type="text/css">
.flipbox {
width: 108px;
height: 108px;
line-height: 108px;
background-color: #ff9000
浏览 0提问于2013-10-17得票数 0
回答已采纳
我找不到一种方法来更改databox上的语言
这是我正在加载的语言文件的代码片段
<script type="text/javascript" src="../../js/i8n/jquery.mobile.datebox.i18n.en.js"></script>
<script type="text/javascript" src="../../js/i8n/jquery.mobile.datebox.i18n.de.js"></script>
<div data-r
浏览 22提问于2013-07-08得票数 0
我尝试使用来自的脚本，因为在我的测试中，它是跨浏览器/操作系统最可靠的。通过我的测试，纯CSS 3D转换只在FF/Chrome上工作。
无论如何，脚本似乎是为了点击，我试图通过悬停来实现它。
我想要的是悬停(或者鼠标)在DIV "A“上，把它翻转给DIV "B”。然后，在悬停(或鼠标)，它翻转回原来的DIV "A“。这应该永远有效，hover=“翻转到B”和悬停=“翻转回A”。最终，在"B“上会有点击行为，但是如果悬停状态正常工作，这不应该影响到这里发生的事情。
我让它工作在一个周期，悬停翻转DIV A到DIV B。当悬停时，DIV B翻转回DIV A。问题是它
浏览 4提问于2014-10-19得票数 1
回答已采纳
1回答
我不知道如何将datebox添加到我的项目中。
我打开页面：，
我选择version and component FlipBox和TimeFlipBox模式，
单击download并将内容另存为picker.js。
接下来，我单击CCS Version 1.45 Full并将内容保存到picker.css。
我将这些文件添加到我页面的header中：
<script src="~/Content/extension/datapicker/picker.js"></script>
<link href="~/Content/extension
浏览 12提问于2015-09-12得票数 0
我希望flipbox没有图像，我该怎么做呢？尝试此操作(并将其设置为空)：
flipBox(
id = 1,
main_img = "",
header_img = "",
...
但它却给了我这张奇怪的图片。
浏览 15提问于2019-11-14得票数 5
回答已采纳
1回答
好的，我使用这个代码：
<script type="text/javascript">
$(function() {
$("#flipPad a:not(.revert)").bind("click",function() {
var $this = $(this);
$("#flipbox").flip({
direction: $this.attr("rel"),
浏览 1提问于2013-10-12得票数 0
3回答
条件XAML (WPF)
、、、
我正在尝试创建一个用户控件，它根据用户在Dependency属性中设置的模式，将用户控件更改为TextBlock和另一个TextBlock或TextBlock和TextBox。我知道依赖属性正在获取信息，但当我尝试设置正确的模板时，问题就出现了。由于某些原因，模板无法正确呈现。
XAML：
<UserControl x:Class="BookOrganizer.FlipBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:
浏览 2提问于2011-02-02得票数 12
回答已采纳
1回答
我想把三个翻转盒子放成一个圆形。下面是我得到的代码： body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-alig
浏览 20提问于2018-12-24得票数 0
回答已采纳
你好，我有一个网站，我正在为这个网站工作，我正在使三个面板翻转时，他们被点击，你可以认为这是一个翻转卡片的概念。我已经做好了所有的工作，但我意识到，因为div本身被包装在一个锚标签中，并且有一个"block“显示。我所拥有的是链接到外部页面的里面的内容，但是因为div是可点击的，所以它只读取那个锚。我试着使用z-index，但似乎并不是所有的都有帮助。
这是我的标记:什么是ElectedFace？
<div class="flip_content" id="flip1">
<div class="content-info&#
浏览 0提问于2012-11-20得票数 2
回答已采纳
你好，我正在尝试写一个jQuery代码片段，它将模拟一个悬停事件在翻转框中，当一个按钮被点击。主要的问题是，我已经尝试了针对此场景的stackoverflow的所有解决方案，但它似乎根本不起作用。 Front of flipbox in dev console Front of flipbox in dev console 下面是我在这个元素上尝试过的代码 jQuery('.eael-elements-flip-box-container').mouseenter().mouseleave();
jQuery('.eael-elements-flip-box-cont
浏览 14提问于2021-07-23得票数 0
回答已采纳
2回答
你好，我正在定义一个变量，我想在其中存储日期-时间输入。
我给这个变量的格式是yyyy-mm-dd hh:MM。但在数据库中，它一直只显示此格式的yyyy-mm-dd而不显示hh:MM
代码
SimpleDateFormat sdf1 = new SimpleDateFormat("yyyy-mm-dd hh:MM");
java.util.Date date = sdf1.parse(rs.getString("dateMaint"));
java.sql.Date sqlStartDat
浏览 0提问于2016-03-04得票数 1
我试图添加来自：的datebox插件
我试图遵循网站上的说明，但可能我遗漏了什么，因为我在页面加载时一直收到以下错误消息：
“未定义TypeError:无法读取未定义的属性‘原型’”
我使用mvc 4，并使用'NuGet‘将插件添加到我的项目中
my bundleConfig:
bundles.Add(new ScriptBundle("~/bundles/jqm-datebox-core").Include(
"~/Scripts/jqm-datebox.core.js"));
bundl
浏览 5提问于2014-10-12得票数 0
回答已采纳
有没有人能帮我解决这类错误？
实际上，我有下面的代码，我想在lblDate.text中显示日期，但在代码的第三行得到了这个错误：
NSDateFormatter *formatter = [[[NSDateFormatter alloc] init] autorelease];
[formatter setDateFormat:@"MMM, yyyy"];
[formatter stringFromDate:myDatePickerView.date] = lblDate.text;
浏览 0提问于2011-04-11得票数 0
回答已采纳
我认为这与作曲家的自动测试有关，因为没有检测到laravel/腔框架/src之外的包。
我对以下问题的上述假设是否正确？我应该在"autoload-dev"嵌套对象中包含psr-4键吗？
我真的很感激你的帮助。
谢谢。
下面是错误异常、composer.json片段和堆栈跟踪日志
低于composer.json
{
...
"autoload": {
"classmap": [
"database/seeds",
浏览 2提问于2018-10-09得票数 0
回答已采纳
我使用的是staggeredGridLayoutManager的回收视图。我要做的是在第一行中显示一个标题项。然后，我想在每一行中显示两个项目。但我不能这样做。
这是我用过的代码。
recyclerView = (RecyclerView)findViewById(R.id.recycler);
staggeredGridLayoutManager = new StaggeredGridLayoutManager(1,1);
recyclerView.setLayoutManager(staggeredGridLayoutManager);
这些都是结果
浏览 6提问于2016-05-05得票数 2
回答已采纳
我正在使用quicklfip ()来制作汉字闪存卡。前面板将有字符，后面板将有定义。我遇到的问题是，我想要显示示例句子，但仅当背板可见时。似乎没有任何回调函数。有没有JQuery专家对如何做到这一点有什么想法？
浏览 2提问于2012-06-16得票数 0
回答已采纳
Hello everybody，这里我想问一下如何在视图中显示数据库中的单个行，通常我们使用@foreach来循环数据。但在这里我只想显示一行。
Note : Display single row but use this eloquent ItemName::latest()
请帮帮我，谢谢:)
浏览 0提问于2018-04-06得票数 0
1回答
我使用这个并用blow编辑它，但它在任何IE上都不起作用。也请帮助我在IE7上运行这个原始的是完美的工作在所有的浏览器，如果谁有其他相同的例子，请与我分享。
<div id="flipBox" class="flipBox">
<div id="Div1" name="div_3" style="display: block;" class="classdiv"> Div 1 lookup </div>
<div id="Div2"
浏览 0提问于2014-02-05得票数 0
我想在我的应用程序中显示原生广告。但在admob中，我不能创建原生广告单元id。当我尝试本机广告与横幅单位id，它的工作-意味着广告显示。我可以继续在本地广告中使用横幅单元id吗？
浏览 0提问于2018-01-14得票数 1
1回答
我希望撤消应用于元素的旧css transform并设置新规则。在css中，我们经常使用!important来覆盖更高优先级的规则，但看起来!important没有对转换属性生效：
.mk-flipbox-front {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
我想覆盖这一点：
.mk-flipbox-front {
-webkit-transform: translateX(100%) rotateY(0deg);
transform: translateX(100%) rotat
浏览 3提问于2016-06-28得票数 0
回答已采纳
此侦听器当前通过单击div中的ref来触发，如下所示。使用jquery，我如何以编程方式触发事件？-或者重写侦听器可能更好。
$("#flipPad a:not(.revert)").bind("click",function(){
var $this = $(this);
$("#flipbox").flip({
direction: $this.attr("rel"),
color: $this.attr("rev"),
content: $thi
浏览 2提问于2013-04-11得票数 0
回答已采纳
我有这段代码，$var1到达我的函数是空的，我不知道为什么，我测试了在函数内部声明变量，它确实起作用了，但是当我试图在函数外部声明它，并将它作为参数传递给do_action时，它不起作用，有什么见解吗？谢谢
add_shortcode工作正常
$name="link";
add_shortcode($name, 'aa_link_shortcode' );
function shorcode_resources($var1) {
global $post;
$shortcode_found = false;
浏览 2提问于2017-11-02得票数 0
1回答
使用，我将在悬停时触发一个翻转效果。如何在3秒后自动恢复div并隐藏显示在翻转上的文本？
这是我的标记：
html
<div class="schwarz" id="flipbox1" rel="rl" rev="#39AB3E" title="Change content as <em>you</em> like!"></div>
<div class="dunkel" id="flipbox2" rel="rl"
浏览 1提问于2015-05-08得票数 0
回答已采纳
我正在使用一个简单的函数读取我的txt文件
我的txt文件内容如下：
album= Prisoner
info= Description about this singer
和php代码：
$Path = 'dewp/pix/info.txt';
$product = parse_ini_file($path);
echo $product['album'];
echo $product['info'];
一切都很好，在本地主机上运行良好，但在我的网站上不是这样。
在我的网站上，它只显示$product‘’info‘，不能显示$product’
浏览 4提问于2010-07-04得票数 0
我想在结帐摘要上显示产品属性
我目前使用的是“MageVision_Blog16”扩展
它只在结账送货信息页面上显示产品属性，但在结帐付款页面上不显示。你能告诉我如何在两个..？上显示产品属性吗？
浏览 9提问于2017-07-12得票数 0
早上!下面是(我知道不是最好的)使用 jQuery插件的jQuery代码。最初的翻转可以正常工作，但恢复翻转在我的生命中将不起作用。我尝试了很多不同的方法，但都没有成功。这就是我目前所拥有的。
任何帮助都将不胜感激！
$('.flip1').bind("click",function(){
var elem = $(".toflip");
if(elem.data('flipped')){
elem.revertFlip();
elem.dat
浏览 0提问于2014-08-28得票数 0
3回答
我尝试使用jquery mobile datebox计算年龄，但从现在开始，就像许多描述中那样。我有两个日期：“出生”和“死亡”，想法是从第二个日期中减去第一个日期。
<div class="ui-field-contain">
<label>born</label>
<input type="text" data-role="datebox" name="born" id="born" min="1808-04-01" m
浏览 0提问于2016-04-21得票数 0
在最新的Chrome和Opera浏览器中，标签内的空行可以正常显示，但在IE10中它们会被删除。这是一个已知的问题，还是有一个CSS或其他设置来在包括IE在内的所有浏览器中正确地显示标记内容？
浏览 0提问于2013-06-05得票数 2
回答已采纳
我使用的是JQM-DateBox，它需要以下Razor标记：
@Html.TextBoxFor(m => m.From, new { @name = "mydate", @id = "mydate",
@data_role = "datebox",
@data_options = "{'mode':'flipbox', 'dateFormat':'dd/mm/YYYY' ,'useNewStyle':true} ")
但是，这样做的结果是：
浏览 1提问于2013-08-29得票数 6
回答已采纳
1回答
我想在画布上显示游戏的分数和关卡。为此，我使用了以下代码：
Paint paint = new Paint();
canvas.drawText("Score: -" + score +
" Level: -" + level + "
Chances:-" + chances, 0, 0, paint);
现在，当分数和级别更新时，这条线的宽度会增
浏览 0提问于2013-06-13得票数 0
1回答
从触发器中移除单击触发器
、、、
我使用来自shinydashboardPlus的函数shinydashboardPlus创建翻转框，并添加了一个按钮。用户必须在上面克里克才能翻转方框。但是当我们点击它的时候，这个盒子也会翻转，我想取消它，我的意思是通过剪裁框来防止翻转(只有当我们点击按钮的时候，这个盒子才能翻转)。我就是这样做的：
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar()
浏览 4提问于2022-07-10得票数 0
回答已采纳
2回答
我想本地化我的安装程序，但在Visual Studio 2008中，Localization属性下拉菜单不包含该语言。我认为我们可以使用代码页，但是如果用户不想在他们的计算机中更改区域和语言的区域设置，字符将显示错误。我在上读过一篇文章，上面说微星国际非正式地支持UTF-8，但我对微星微星不熟悉。有没有经验丰富的，请指教我。谢谢。
浏览 2提问于2011-02-16得票数 4
2回答
我希望一些天才能够帮助我调试我的JQuery函数。它在Firefox和Safari上运行得很好，但在Chrome上却不能完全渲染背景。奇怪的是，如果我以任何方式调整浏览器窗口的大小，它就会自行修复。
当您在站点上向下滚动时，JQuery还会导致顶部导航上的悬停属性中断。
我是新的编码世界，所以我真的需要一些帮助。我确信这与"window.scroll“有关，但我真的不知道。
你可以访问我的网站：
我做了一个JFiddle：
我将Javascript/JQuery粘贴到下面：
$("document").ready(function() {
flag=true;
浏览 2提问于2014-05-07得票数 0
回答已采纳
如何限制行中Listviewbuilder项的数量(例如，我想在一行中显示5个项)，然后转到下一行.My代码。列表中有超过500项，但我只想在每一行中显示5项，然后转到下一行。谢谢
Container(
height: 215.0,
child: ListView.builder(
padding: const EdgeInsets.symmetric(
vertical: 12.0,
horizontal: 8.0,
),
s
浏览 2提问于2021-05-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
