html - 将图像和画廊彼此对齐-6ren

html - 将图像和画廊彼此对齐

转载作者：行者123 更新时间：2023-11-28 01:11:54

我正在尝试将“选定”英雄放在右侧，使其与左侧的英雄库对齐，以便稍后在选定英雄下方添加信息和按钮。此页面仅缺少一段文字，该文字将位于画廊下方；所选英雄和右侧英雄头像下方的确认按钮。将所有内容包含在一个巨大的部分中会更容易吗？还是我把它弄得太复杂了？

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>

最佳答案

如果您不能使用 grid system ，尝试以下 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>

关于html - 将图像和画廊彼此对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52050127/

文章推荐： c++ - 对象在构造函数之后不存在？

文章推荐： c++ - opengl颜色四边形

文章推荐： javascript - 如何找出哪个元素触发了哪个事件

文章推荐： c++ - 如何设置 QNetworkReply 属性以获得正确的 NCBI 页面？

html - 对齐/对齐 li 网格元素
我希望能够像在 jsFiddle 中那样将元素列表对齐到右侧的复选框。这是如何做到这一点的最佳实践？传统上我从来没有 float 过相互嵌套的元素，所以我想确定这是否是解决此问题的正确方法。代码(h
assembly - MIPS assembly 对齐对齐 n
指令.align n是什么意思在数组中做什么？更具体地说，假设我有以下部分代码: array: .align 2 .space 800 它的重要性是什么，为什么不跳过它并使用
c - 强制 2 函数对齐的幂 s.t 对齐 % 一些其他值 == 对齐
基本上我正在寻找一种强制特定相对对齐的方法即我想保证其他一些值(value) m s.t m > n alignment_of(foo) % 2^m == 2^n IE: .align 2^m; .
多维数组结构的C++对齐
在我的代码中，我必须考虑一个数组数组，其中内部数组具有固定维度。为了使用 STL 算法，将数据实际存储为数组的数组很有用，但我还需要将该数据传递给 C 库，该库采用扁平化的 C 样式数组。如果能够以
BlackBerry HorizontalFieldManager 对齐
横向上，我想显示两个位图，并在它们之间显示一个标签字段。代码看起来很简单，但所有字段都添加在屏幕左侧。 HorizontalFieldManager hfm = new HorizontalFiel
轴标签与表达式的 R 对齐
我想绘制一个变量名称及其符号。因为某些变量的名称很长，所以我试图将换行符与轴标签混合使用。这会导致对齐中发生有趣的事情: par(mar=c(1,12,1,1)) plot( y=1:6, 1:6,
r - 将左两行图例标题与expression()对齐
使用这个脚本 df <- data.frame(x = 1:5, y = 1:5, color = letters[1:5]) ggplot(df, aes(x, y, fill = color))
matlab - 在matlab中从结构创建表 - 对齐
我有一个带有标量字段的结构，比如妈妈，我想在屏幕上对齐的列中显示结构的值，可能还有一些标题。这是一个最小的工作示例: mom.a = 1; mom.b = 2; mom.veryLongName =
ios 自动布局视觉格式 - 对齐
在 iOS6 中，我使用自动布局。我有 2 个以编程方式创建的 View v1 和 v2。 v2 作为 subview 添加到 v1 v1 的约束已通过编程方式创建(此处未显示)。我希望 v1 和
C++ 对齐 new[]
概述浏览时operator new, operator new[] - cppreference.com ，似乎我们有许多选项来分配具有特定对齐要求的对象数组。但是，没有指定如何使用它们，而且我似乎
flutter - 对两个文本小部件仅使用一次“对齐”
Widget _createProfileContainer() { return new Container( height: 64.0, child: ne
javascript - Bootstrap 对齐
我正在使用 Bootstrap 和语义 UI 的组合来设计和对齐我的网页。目前，我在将页面 api map 和博客文章在整个页面上对齐时遇到问题，而不是像图像所示那样堆叠在一起。这是我的底层代码，
Java GUI 对齐
所以我已经添加了标签和所有内容，但我仍然在格式化和对齐所有内容时遇到问题。计算按钮显然应该居中。我知道使用 gridbag 将框架分割成坐标系，当一列大于其他列时，它会调整其他列并将其抛弃(对吗？)。
java - 对齐 JButton
我必须将程序上的按钮对齐到中间，我运行的当前代码但显示的按钮与程序一样大，我想要一个特定大小的中心按钮，这是我尝试过的 /** * Created by Timk9 on 11/04/2016.
VIM 格式化/对齐
我正在尝试将 VIM 作为我的 ruby/rails 编辑器。太胖了，我对它的功能印象深刻并且我能够安装以下插件以提供更好的 IDE 体验自动配对 Better-snipmate-snippe
c++ - 对齐/偏移结构的特定成员
在结构内对齐成员的最佳或常规方法是什么？添加虚拟数组是最佳解决方案吗？我有一个 double 的结构和 double 的三倍是吗？ struct particle{ double mass;
C++ iomanip 对齐
我正在尝试对齐我的输出，但由于某种原因我无法做到我多么想要它，这真的很令人沮丧。标题不会正确对齐。我不知道我是否正确使用了 setw()。 #include using std::cout; usi
android - 对齐 TextView
我正在开发一个 android 应用程序，其相对布局如下所示。这是应用程序在屏幕上的显示方式的 imgur 链接:http://imgur.com/c4rNJ .我希望“Text 1”出现在“a l
java - 对齐 JButton
我不确定为什么我不能在下面的代码中调整按钮的位置。我有几行设置了边界，但我一定遗漏了一些东西。 public DayGUI() { mainFrame = new JF
html - 对齐 iframe
我有一个 html 页面，我想在页面底部对齐一个 iframe，使 iframe 占据所有宽度，我无法在底部对齐 iframe。请找到底部的 iframe 标签页面。 The rest of th

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 将图像和画廊彼此对齐