Html css文本交换在flex容器中出错
伙计们，我完全是个新手。我通过尝试解决自己制造的问题来学习。我正在读一本关于换一个句子的书，我决定让这个句子一个接一个地换一个，但到目前为止我失败了。如果原来的句子和新的句子有相同的长度，这很容易。但让我们假设它们是不同的，有时需要转到另一行以看起来像传统文本。我无法从几个小时内解决它，在附加的屏幕上有一个结果和我想要的。我查看了几个网站和想法。我设法改进了它在屏幕上的显示方式，因此它更连续，但仍然没有填充空格，或者如果文本较长，它也不会扩展。我想在按下一个句子后，用另一个句子代替它，但是文本是连续的，没有任何中断。我基于这个网站。下面是我的html和css代码 这是我的问题图-Html css文本交换在flex容器中出错,html,css,Html,Css,伙计们，我完全是个新手。我通过尝试解决自己制造的问题来学习。我正在读一本关于换一个句子的书，我决定让这个句子一个接一个地换一个，但到目前为止我失败了。如果原来的句子和新的句子有相同的长度，这很容易。但让我们假设它们是不同的，有时需要转到另一行以看起来像传统文本。我无法从几个小时内解决它，在附加的屏幕上有一个结果和我想要的。我查看了几个网站和想法。我设法改进了它在屏幕上的显示方式，因此它更连续，但仍然没有填充空格，或者如果文本较长，它也不会扩展。我想在按下一个句子后，用另一个句子代替它，但是文本是
有很多方法可以实现它。使用最多种类的最简单方法是使用JS和onlick事件，如下所示。在本例中，有两行用作跨度，以便可以在段落中使用。一个设置为
显示：无不可见。单击该行，您将触发脚本，该脚本将使用display:none隐藏该行并通过将其更改为显示：块来显示另一个
函数show1b（）{
document.getElementById（“line-1b”）.style.display=“block”；
document.getElementById（“line-1a”）.style.display=“无”；
}
函数show1a（）{
document.getElementById（“line-1a”）.style.display=“block”；
document.getElementById（“line-1b”）.style.display=“无”；
}
#第1b行{
显示：无；
}
这是原文。单击我以显示备选文本。
这是备选案文。单击我以显示原始文本。
有很多方法可以实现它。使用最多种类的最简单方法是使用JS和onlick事件，如下所示。在本例中，有两行用作跨度，以便可以在段落中使用。一个设置为显示：无不可见。单击该行，您将触发脚本，该脚本将使用display:none隐藏该行并通过将其更改为显示：块来显示另一个
函数show1b（）{
document.getElementById（“line-1b”）.style.display=“block”；
document.getElementById（“line-1a”）.style.display=“无”；
}
函数show1a（）{
document.getElementById（“line-1a”）.style.display=“block”；
document.getElementById（“line-1b”）.style.display=“无”；
}
#第1b行{
显示：无；
}
这是原文。单击我以显示备选文本。
这是备选案文。单击我以显示原始文本。
我仍然不清楚您的问题。所以你试图交换文本行。交换什么时候发生？它应该如何发生？您打算使用什么样的交换触发器。如果要交换文本行，为什么要使用绝对定位？为什么要为它使用输入和标签？你到底想做什么？好的，谢谢你的回复。交换应在按下文本行后进行。再次按下后，应出现上一句。关于绝对定位-这只开始与此一起工作？我指的是复选框。或者它是如此简单以至于它是一个答案？我从我提供的链接中复制了这些输入和标签-我认为这是必要的，因为不可见的复选框。你可以检查一个清晰的代码作为作者的第五个想法。我对它做了一点修改，这样句子就会横着走。我试着通过解决问题来学习，但是如果你不经过思考就不知道解决方案，那就不要麻烦了。我不想浪费你的时间，我想也许我的问题很容易被别人解决。相反，也许我发现了一个以前没人想到的问题。如果我能想出一个答案，我会把它贴在这里。你的问题我仍然不清楚。所以你试图交换文本行。交换什么时候发生？它应该如何发生？您打算使用什么样的交换触发器。如果要交换文本行，为什么要使用绝对定位？为什么要为它使用输入和标签？你到底想做什么？好的，谢谢你的回复。交换应在按下文本行后进行。再次按下后，应出现上一句。关于绝对定位-这只开始与此一起工作？我指的是复选框。或者它是如此简单以至于它是一个答案？我从我提供的链接中复制了这些输入和标签-我认为这是必要的，因为不可见的复选框。你可以检查一个清晰的代码作为作者的第五个想法。我对它做了一点修改，这样句子就会横着走。我试着通过解决问题来学习，但是如果你不经过思考就不知道解决方案，那就不要麻烦了。我不想浪费你的时间，我想也许我的问题很容易被别人解决。相反，也许我发现了一个以前没人想到的问题。如果我能想出一个答案，我会把它贴在这里。谢谢你，我会在接下来的几天里和它坐在一起试着找出答案。我没有足够的技能来帮助你的代码，但如果你有任何需要翻译的东西从波兰语或俄语到英语给我一个私人消息。再次感谢你。我怀疑我是否能成为一名程序员，但我把它看作是大脑的一个难题，有时它现在对我来说太复杂了。谢谢你，我会在接下来的几天里坐在那里试着去解决它。我没有足够的技能来帮助你的代码，但如果你有任何需要翻译的东西从波兰语或俄语到英语给我一个私人消息。再次感谢你。我怀疑我是否能成为一名程序员，但我把它看作是大脑的一个难题，有时它现在对我来说太复杂了。
<html>
<head>
<meta charset="utf-8"/>
<title>IGE</title>
<link rel="stylesheet" href="3code.css">
</head>
<body>
<div class="flexbox-container">
<input type="checkbox" id="zdanie1Checkbox" />
<label id="zdanie1" for="zdanie1Checkbox">Origxt1.</label>
<input type="checkbox" id="zdanie2Checkbox"/>
<label id="zdanie2" for="zdanie2Checkbox"> Original texsdsdsdsdsdsdsdsdddddd sdsd sdsdsdsd sd sd sdt2.</label>
<input type="checkbox" id="zdanie3Checkbox" />
<label id="zdanie3" for="zdanie3Checkbox">Original tsd ext3.</label>
<input type="checkbox" id="zdanie4Checkbox" />
<label id="zdanie4" for="zdanie4Checkbox">Orig sdsdsddsinalText4.</label>
<input type="checkbox" id="zdanie5Checkbox" />
<label id="zdanie5" for="zdanie5Checkbox">Orixt54.</label>
</div>
</body>
</html>
body {
padding: 0px 10px 10px 10px;
}
.flexbox-container {
display:flex;
flex-wrap:wrap;
flex-direction: row;
justify-content:flex-start;
align-content:center;
}
#zdanie1 {
position: relative;
}
#zdanie1Checkbox {
display: none;
}
#zdanie1Checkbox:checked + #zdanie1:after {
content: "The outer layer is nearly melted through.";
align-self: stretch;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
color: red;
width:auto!important; /*this set the height to auto for those supporting it (not IE)*/
width:500px; /*for IE, all others override it by the previous rule*/
min-width:500px; /*for the ones that support it (all but IE)*/
padding-right: auto;
}
#zdanie2 {
position: relative;
}
#zdanie2Checkbox {
display: none;
}
#zdanie2Checkbox:checked + #zdanie2:after {
content: "The outer layer is nearly melted through.";
align-self: stretch;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
color: red;
width:auto!important; /*this set the height to auto for those supporting it (not IE)*/
width:500px; /*for IE, all others override it by the previous rule*/
min-width:500px; /*for the ones that support it (all but IE)*/
}
#zdanie3 {
position: relative;
}
#zdanie3Checkbox {
display: none;
}
#zdanie3Checkbox:checked + #zdanie3:after {
content: "Soon the second layer will go.";
align-self: stretch;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
color: red;
width:auto!important; /*this set the height to auto for those supporting it (not IE)*/
width:500px; /*for IE, all others override it by the previous rule*/
min-width:500px; /*for the ones that support it (all but IE)*/
}
#zdanie4 {
position: relative;
}
#zdanie4Checkbox {
display: none;
}
#zdanie4Checkbox:checked + #zdanie4:after {
content: "Then the scanner blinks silver and I’ve got what I came for.";
position: absolute;
align-self: stretch;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
color: red;
overflow-wrap: break-word;
width:auto!important; /*this set the height to auto for those supporting it (not IE)*/
width:500px; /*for IE, all others override it by the previous rule*/
min-width:500px; /*for the ones that support it (all but IE)*/
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
#zdanie5 {
position: relative;
}
#zdanie5Checkbox {
display: none;
}
#zdanie5Checkbox:checked + #zdanie5:after {
content: "The outer layer is nearly melted throu I almost didn’t notice.";
position: absolute;
align-self: stretch;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
color: red;
width:auto!important; /*this set the height to auto for those supporting it (not IE)*/
width:500px; /*for IE, all others override it by the previous rule*/
min-width:500px; /*for the ones that support it (all but IE)*/
}