文章/答案/技术大牛

发布

社区首页 >问答首页 >对齐一个图像和一个相邻的画廊

问对齐一个图像和一个相邻的画廊
EN

Stack Overflow用户

提问于 2018-08-28 04:31:52

回答 2查看 41关注 0票数 0

我试图将“选定的”英雄定位在右边，使其与左边的英雄库保持一致，这样我就可以在选定的英雄后面添加信息和按钮。此页面只缺少一段文字，该段落将位于两个图库的下方；选定的英雄和将在右侧英雄肖像下面的确认按钮。是否可以更容易地将所有信息都包含在一个大的部分中？还是我把事情弄得太复杂了？

var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();

body {
  background-color: lightsteelblue;
  margin: 0;
}
h1 {
    text-align: center;
    font-weight: bold;
    font-size: 70px;
    text-shadow: 3px 3px grey;
}
.time{
   position: absolute;
   top: 100%;
   right: 0;
}
.navbar {
  overflow:hidden;
  background-color: black;
}
.navbar a{
  float: left;
  display: block;
  color: White;
  text-align: center;
  padding: 10px 10px;
  font-size: 20px;
  text-decoration: none;
}
.navbar a:hover{
  background-color: white;
  color: black;
}
.navbar a:active {
  background-color: grey;
  color: white;
}
.navbar input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 12px;
}
#heroList{
  width: 1000px;
  margin: 0 50px;
  margin-top: 200px;
}
.heroes{
  margin: 5px;
  border: 1px solid black;
  width: 180px;
  float: left;
}
.heroNames{
  padding: 10px;
  text-align: center;
  color: white;
  font-weight: bold;
  background-color:black;
}
.heroes img{
  width: 175px;
  height: 175px;
}
#chosenHero{
  width: auto;
  margin: 0 50px;
  margin-top: 50px;

}
.myHero{
  border: 1px solid black;
  width: 180px;
  float: right;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">

</head>
<body>
<div class="navbar">
    <a href="index.html">Home</a>
    <a class="active" href="hero.html">Hero</a>
    <a href="about.html">About</a>
    <input type="text" placeholder="Search..">
</div>

<h1>CHOOSE YOUR HERO</h1>

<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
    <!--Hero portraits go here(outlined, not selectable)-->
    <div class="heroes">
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
    </div>
    <div class="heroes">
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
    </div>
    <div class="heroes">   
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
    </div>
    <div class="heroes">  
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
    </div>
    <div class="heroes">  
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
    </div>
    <div class="heroes">  
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
    </div>
    <div class="heroes">  
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
    </div>
    <div class="heroes">    
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
    </div>
    <div class="heroes">   
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
    </div>
    <div class="heroes">    
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
    </div>
</div>

<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
    <div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
    </div>
</div>

<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>


<script type="text/javascript" src="practice.js"></script>
</body>
</html>

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-28 04:57:23

如果不能使用网格系统，请尝试以下CSS修改：

var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();

    body {
  background-color: lightsteelblue;
  margin: 0;
}

h1 {
  text-align: center;
  font-weight: bold;
  font-size: 70px;
  text-shadow: 3px 3px grey;
}

.time {
  position: absolute;
  top: 100%;
  right: 0;
}

.navbar {
  overflow: hidden;
  background-color: black;
}

.navbar a {
  float: left;
  display: block;
  color: White;
  text-align: center;
  padding: 10px 10px;
  font-size: 20px;
  text-decoration: none;
}

.navbar a:hover {
  background-color: white;
  color: black;
}

.navbar a:active {
  background-color: grey;
  color: white;
}

.navbar input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 12px;
}

.navbar:after {
  clear: both;
  content: "";
  display: block;
}

#heroList {
  width: calc(100% - 200px);
  float: left;
}

.heroes {
  margin: 5px;
  border: 1px solid black;
  width: 180px;
  float: left;
}

.heroNames {
  padding: 10px;
  text-align: center;
  color: white;
  font-weight: bold;
  background-color: black;
}

.heroes img {
  width: 175px;
  height: 175px;
}

#chosenHero {
  width: 200px;
  float: left;
}

.myHero {
  border: 1px solid black;
  width: 180px;
  float: right;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">

</head>
<body>
<div class="navbar">
    <a href="index.html">Home</a>
    <a class="active" href="hero.html">Hero</a>
    <a href="about.html">About</a>
    <input type="text" placeholder="Search..">
</div>

<h1>CHOOSE YOUR HERO</h1>

<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
    <!--Hero portraits go here(outlined, not selectable)-->
    <div class="heroes">
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
    </div>
    <div class="heroes">
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
    </div>
    <div class="heroes">   
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
    </div>
    <div class="heroes">  
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
    </div>
    <div class="heroes">  
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
    </div>
    <div class="heroes">  
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
    </div>
    <div class="heroes">  
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
    </div>
    <div class="heroes">    
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
    </div>
    <div class="heroes">   
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
    </div>
    <div class="heroes">    
        <img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
    </div>
</div>

<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
    <div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
    </div>
</div>

<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>


<script type="text/javascript" src="practice.js"></script>
</body>
</html>

票数 0

Stack Overflow用户

发布于 2018-08-28 05:20:21

这将是正确的做法。

https://i.imgur.com/xIm2fbV.png

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52050127

复制

相似问题

问对齐一个图像和一个相邻的画廊
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对齐一个图像和一个相邻的画廊EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对齐一个图像和一个相邻的画廊
EN