在 Html/CSS/JS 中将文本格式化到图像的右侧
[英]Formatting Text to the right of an image in Html/CSS/JS
问题描述
所以我试图用我画的以下格式在 javascript 中制作一个 div。
所以外面的黑盒子就是 div 容器。 左边的红框是我要插入的img。 右边的红色框是我要添加的文本行。 蓝色框是我要添加的按钮。 我可以将图像插入到正确的位置，但是在图像右侧插入文本行时遇到了很多麻烦。 我尝试使用自对齐添加样式：对，但它只是将文本放在图像下方。 我也尝试过 float: left for the image，但这并没有达到我的预期。 我正在为这个 div 使用 flex-box，尽管我可能没有正确使用它。
有人可以告诉我如何在 html/css/js 中格式化这样的 div 吗？ 这也是使用 javascript 动态创建的，所以绝对定位在这里绝对行不通。 这是 javascript。
var flexcontainer = document.createElement("div");
flexcontainer.style = "border-left: 10px solid red; padding: 10px; margin: 15px 0px; background-color: black;";
flexcontainer.classList.add("flex-container;");
var poster = document.createElement("img");
poster.src = "https://cinemaone.net/images/movie_placeholder.png";
poster.style = "flex-grow: 1;";
flexcontainer.appendChild(poster);
var content = document.createElement("div");
content.style = "flex-grow: 9; color: white; self-align: right;";
content.innerHTML = "HIIIIIIIIIIIIIIIIIIIIIIIIII";
flexcontainer.appendChild(content);
document.getElementById("resultscontainer").appendChild(flexcontainer);
1 个解决方案
解决方案1
0 已采纳 2021-03-07 11:25:00
其实很简单。 我会建议你学习 flexbox，你应该可以毫无困难地制作这些布局。
另外，如果你想在 javascript 中添加多个 class，你可以像div.classList.add("classOne", "classTwo", "classThree"); . 此外，您不必用;分隔类名。 就像你在添加样式时所做的那样。
var flexcontainer = document.createElement("div"); flexcontainer.classList.add("flex-container"); var poster = document.createElement("img"); poster.src = "https://cinemaone.net/images/movie_placeholder.png"; poster.classList.add("poster"); flexcontainer.appendChild(poster); var content = document.createElement("div"); content.classList.add("content"); content.innerHTML = "HIIIIIIIIIIIIIIIIIIIIIIIIII"; flexcontainer.appendChild(content); document.getElementById("resultscontainer").appendChild(flexcontainer);
.flex-container { display: flex; border-left: 10px solid red; padding: 10px; margin: 15px 0px; background-color: black; }.poster { flex-grow: 1; flex-basis: 50%; }.content { color: white; flex-basis: 50%; padding: 0 15px; }
<!DOCTYPE html> <html> <body> <div id="resultscontainer"> </div> </body> </html>
文本不显示在图像 CSS HTML JS 上
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.