Question

我正在设计这个盒子，但我有以下问题。我有一个图像，一个标题和一些文本，但我无法对齐标题，使其显示在文本的其余部分之上。最终看起来像这样：

HTML：

 <div class='Favorites'>
     <div class='favorites_info'>
         <div class="box">
               <div class="picture">
                    <img src="Iconos/Help/favorites_help.png" alt="Fav" class="favor_help">
                </div>
                <div class="Messagebox_title">
                    <h1 >Favorites category
                    </h1>
                </div>
                <div class="Messagebox">
                    <h4 >You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
                    </h4>
                </div>
        </div>
     </div>

关于两个文本部分的CSS：

.Messagebox_title {
    vertical-align:middle;
    display:table-cell;
    text-align:center;
    color: #555;
    position: relative;
    font-family: monaco, monospace;
    font-size: 15px;
}

.Messagebox {
    vertical-align:middle;
    display:table-cell;
    text-align:justify;
    color: #555;
    position: relative;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: monaco, monospace;
    font-size: 15px;
  }

Answer 1

您可以使用flexbox，您需要将文本包装在另外的div。

中

示例：

＆＃13;

.Messagebox_title {
  text-align: center;
}

.Messagebox {
  text-align: justify;
  margin: 0 2px;
}

.box {
  font-size: 15px;
  font-family: monaco, monospace;
  display: flex;
  color: #555;
}

.text_wrapper {
  display: flex;
  flex-direction: column;
}

＆＃13;

<div class='Favorites'>
  <div class='favorites_info'>
    <div class="box">
      <div class="picture">
        <img src="https://unsplash.it/150" alt="Fav" class="favor_help">
      </div>
      <div class="text_wrapper">
        <div class="Messagebox_title">
          <h1>Favorites category
          </h1>
        </div>
        <div class="Messagebox">
          <h4>You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
          </h4>
        </div>
      </div>
    </div>
  </div>

＆＃13;

您还可以使用CSS Grid执行类似操作，从而减少所需的HTML数量。

＆＃13;

.Favorites {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-gap: 1em;
  font-size: 15px;
  font-family: monaco, monospace;
  color: #555;
}

.picture {
  grid-row: 1 / 3;
}

h1 {
  grid-column: 2;
  text-align: center;
}

h4{
  grid-column: 2;
  grid-row: 2;
  text-align: justify;
  margin: 0 2px;
}

＆＃13;

<div class='Favorites'>
  <div class="picture">
    <img src="https://unsplash.it/150" alt="Fav" class="favor_help">
  </div>
  <h1>Favorites category</h1>
  <h4>You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.</h4>
</div>

＆＃13;

Answer 2

根据您的需要尝试更改

.box{float:left;width:100%;position:relative;border:1px solid yellow;margin-bottom:15px;}
info{border:1px solid blue;}
.icon{float:left;width:100px;background:yellow;height:120px;text-align:center;position:relative;overflow:hidden;}
.info .icon{background:blue;}
.icon span{position:absolute;top:auto;margin:33% auto;left:0;right:0;bottom:auto}
.text{float:left;width:calc(100% - 100px);width:-webkit-calc(100% - 200px);padding:5px;}

<div class="box">
<div class="icon"><span>Img</span></div>
<div class="text">
<h3>Heading comes here</h3>
<p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>

</div>
<div class="box info">
<div class="icon"><span>img</span></div>
<div class="text">
<h3>Heading comes here</h3>
<p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>

</div>

Answer 3

你做得很好。

您的代码通过稍作更改来实现。

只需更改显示：阻止并添加浮动：左侧为您的图片。

<style>

.picture 
{
    float:left;
    margin-right:10px;
}
.Messagebox_title {
    vertical-align:middle;
    display:block;
    text-align:left;
    color: #555;
    position: relative;
    font-family: monaco, monospace;
    font-size: 15px;
}

.Messagebox {
    vertical-align:middle;
    display:block;
    text-align:justify;
    color: #555;
    position: relative;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: monaco, monospace;
    font-size: 15px;
}

</style>
<div class='Favorites'>
 <div class='favorites_info'>
     <div class="box">

           <div class="picture">
                <img src="http://eztechtraining.com/wp-content/uploads/2012/11/2012-10-20-21.38.35-150x150.jpg" alt="Fav" class="favor_help">
            </div>

            <div class="Messagebox_title">
                <h1 >Favorites category
                </h1>
            </div>
            <div class="Messagebox">
                <h4 >You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
                </h4>
            </div>

    </div>
 </div>

对齐框内的图像，文本和标题

3 个答案: