gpt4 book ai didi

html - 定位图像和文本信息

转载 作者:行者123 更新时间:2023-11-28 02:53:52 24 4
gpt4 key购买 nike

我一直在尝试在页面中央定位图像,并在页面两侧(左侧和右侧)定位两个文本部分。右侧的文本部分位于图像下方,但我无法在同一行中找到它。

这是我的 HTML 代码:

<pre>
<html>
<head>
<link rel="stylesheet" href="EXC.css">
<script type="text/javascript" src="EXC.js"></script>
</head>
<body>
<div id="ronimg">
<img src="achivs.png"/>
<br>
<a href="EXC.html"><button class="button" style="vertical-align:middle"><span> GOBACK </span></button></a>
</div>
<div id="ronalfor">
THIS IS THE FIRST EXAMPLE


</div>

<div id="another">
THIS IS THE SECOND EXAMPLE

</div>
</body>
</html>
</pre>

这是CSS代码:

<pre>
#ronimg
{
margin-top: 30px;
float: right;
margin-right: 600;
clear: none;
}
#ronalfor
{
color: #43acf8;
font-style: oblique;
margin-top: 30px;
border: 5px inset #b1b53e;
float:left;
width: 500px

}

#another
{
clear: both;
color: #43acf8;
font-style: oblique;
margin-top: 30px;
border: 5px inset #b1b53e;
float:right;
width: 500px
}
</pre>

最佳答案

Flexbox 来拯救。我在您的 HTML 周围添加了一个 flexbox 容器,隐式地将容器的子项变成了 flex 子项。然后我使用 order 属性按照您想要的方式排列子项(图像在中间,文本部分在它的两侧)。

.flex-container {
display: flex;
margin-top: 30px;
}

#ronimg img {
width: 100%;
max-width: 100%;
height: auto;
}

#ronimg {
order: 1; /* image in the middle */
}

#ronalfor,
#another {
border: 5px inset #b1b53e;
font-style: oblique;
color: #43acf8;
flex-basis: 200px; /* sets a minimum width for these elements */
}

#ronalfor {
order: 0; /* section on the left */
}

#another {
order: 2; /* section on the right */
}
<div class="flex-container">

<div id="ronimg">
<img src="http://placekitten.com/200/200" />
<br>
<a href="EXC.html">
<button class="button" style="vertical-align:middle"><span> GOBACK </span></button>
</a>
</div>

<div id="ronalfor">
THIS IS THE FIRST EXAMPLE
</div>

<div id="another">
THIS IS THE SECOND EXAMPLE
</div>

</div>

jsfiddle demo

关于html - 定位图像和文本信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38151999/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com