Question

所以我遇到的问题是我希望图像位于div的右上角，但与标题位于同一行/级别。现在它只是停留在标题旁边，并且填充或边距只是推动标题。如果有人知道如何解决这个问题会非常有帮助！谢谢！

＆＃13;

#whoheading{
    color:#10D0C9;
    font-family: 'Philosopher', sans-serif;
    display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;    	
}

#description{
    display:flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    color: #BBBBBB;
    margin:15px;
    max-width: 1000px;
}

#smaller {
    display:flex;
    justify-content: center;
    align-content: center;
    align-self: center;      
    flex-basis: auto;
    flex-grow: 1;
}

#whoperson{
    width:100px;    	
    float:right;
    display:inline-block;
    margin:20px;    	
}

＆＃13;

<div id="who">     	
    <h3 id="whoheading">Who Am I? <img src="https://lh4.ggpht.com/4BNnZN8pRM2FMCzZo_JRm3v17wi1bu2fCI4lCVw9R-ASyS0O1uPUviBLAsC_-NiWLCE=w300" id="whoperson"></h3>    	 
    <div id="smaller">
        <p id="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>    	 
    <a href="about.html" id="whogoal" class="goals hover-fill" data-txthover="Hover Over Me">Get to know me better</a>     	
    <div class="keepOpen"></div>
</div>

＆＃13;

Answer 1

我会使用List<Bucket> bucketList = null; bucketList = s3Client.listBuckets();将图像和h3元素包围起来并对该div应用一些样式以获得您正在寻找的效果。

见下文：

＆＃13;

div

＆＃13;

#top{
  display: inline-block;
  width: 100%;
  text-align: center;
}

#whoheading{
  color:#10D0C9;
  font-family: 'Philosopher', sans-serif;
  margin-top: 65px;
}

#whoperson{
  width:100px;
  margin:20px;
  float: right;
}

#description{
  display:flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  color: #BBBBBB;
  margin:15px;
  max-width: 1000px;
}

#smaller {
  display:flex;
  justify-content: center;
  align-content: center;
  align-self: center;      
  flex-basis: auto;
  flex-grow: 1;
}

＆＃13;

Answer 2

首先放置浮动图像然后键入文本 image link style = float：right ... then

使Carring DIV宽度为100％

Answer 3

试试这些css：

#whoheading {
   align-items: flex-start;
}

#whoperson {
  margin-top: 0;
}

将图像浮动到标题的右上角

3 个答案: