Question

我一直在尝试在页面中心找到一个图像，并在其两侧（左侧和右侧）找到两个文本部分。右侧文本部分位于图像下方，我无法将其放在同一行中。

这是我的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>

Answer 1

Flexbox救援。我在HTML周围添加了一个flexbox容器，隐式地将容器的子容器变成了flex子容器。然后我使用order属性按照您想要的方式排列子项（图像在中间，文本部分位于其侧面）。

＆＃13;

.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 */
}

＆＃13;

<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>

＆＃13;

jsfiddle demo

Answer 2

删除#another { clear:both; }，使其找到同一行。

查找图像和文本信息

2 个答案: