gpt4 book ai didi

html - CSS:如何做出正确的布局?

转载 作者:太空宇宙 更新时间:2023-11-04 15:01:43 24 4
gpt4 key购买 nike

所以我在这里试图弄清楚如何根据需要制作我的布局。在解决问题之前,我会先告诉您我的想法。

所以我现在正在尝试做这样的事情: My idea

现在是这样的:

How it is now

所以我们可以说我们非常接近,但正如你们所见,标题、投票发布属性也非常接近图像,我只希望它们之间有一个空格,问题是它不适用于边距、左/右边距、位置和其他一些我无法弄清楚。我在想也许我的 JS 正在这样做,因为我正在使用它:

$('#title').html("标题:"+ data.title);

Title: 可能是什么原因造成的?但是我不太确定我是否做了正确的事情。我在我的 CSS 中做了这个:

`#title{
margin: 15px;
font-size:15px;
padding: 5px;
}
#release {
font-size:15px;
padding: 5px;
}
#vote {
font-size:15px;
padding: 5px;
}
#overview {
font-size:15px;
padding: 5px;
}
#poster {
float: left;
width: 250px;
height: 450px;
}
#trailer {
}`

所以我不太确定的是海报和描述。我不确定用 float: left; 做这件事是否正确。如果概述有很多信息,可能会在以后导致它,我认为文本会位于图片下方,这看起来非常糟糕。第二个是我只是想在图片和描述之间留一个空格,就像我之前描述的那样。

因此,如果需要更多代码或信息,请告诉我,我会很快回复。

编辑:我还没有完成 Youtube 嵌入,因为我还没有学会这样做。所以这可能会在我的迷你元素中稍后出现。但是,如果已经确定位置就好了,这样我以后就不用担心了。

编辑 1.2:

enter image description here

<aside id="title"></aside>
<aside id="release"></aside>
<aside id="vote"></aside>
<aside id="overview"></aside>
<aside id="resultsDiv"></aside>
<aside id="poster"></aside>
<aside id="trailer"></aside>

CSS:

aside {
float : left;
margin-left: 20px;
}

编辑 1.3:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MovieTrailerbase</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="page">

<h1>Movie Search</h1>

<form id="searchForm" method="post">
<fieldset>

<input id="s" type="text" />

<input type="submit" value="Submit" id="submitButton" />

<div id="searchInContainer">
<input type="radio" name="check" value="site" id="searchSite" checked />
<label for="searchSite" id="siteNameLabel">Search movie</label>

<input type="radio" name="check" value="web" id="searchWeb" />
<label for="searchWeb">Search series</label>
</div>

</fieldset>
</form>
<aside id="title"></aside>
<aside id="release"></aside>
<aside id="vote"></aside>
<aside id="overview"></aside>
<aside id="resultsDiv"></div>
<aside id="poster"></aside>
<aside id="trailer"></aside>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>


</html>

最后编辑:

让它与这个一起工作:

http://codepen.io/anon/pen/NGyNQY?editors=110

谢谢大家!

最佳答案

您应该像看待一张 table 一样看待您的设计。

+--------------------------------+
| input | button |
+------------+-------------------+
| | |
| poster | content |
| | |
| | |
| | |
+------------+-------------------+
| |
| video |
| |
+--------------------------------+

如果我们只看行,您会看到我们有 3 行。

在 HTML 中我们会有类似的东西:

<div class="header"></div>
<div class="main"></div>
<div class="youtube"></div>

在标题中我们有输入和按钮。在主要我们得到图像和内容youtube 视频在下面的行中。

<div class="header">
<input class="input" />
<button class="button">button</button>
</div>
<div class="main">
<div class="poster"></div>
<div class="content"></div>
</div>
<div class="youtube"></div>

包括一些使用 float 的 CSS 来对齐图像和内容,并为内容留出一点边距作为图像之间的空间,如下所示:

.poster {
float: left;
}
.content {
float: left;
margin-left: 10px;
}

您可以在此处查看可行的解决方案:http://jsfiddle.net/ubrdxnuw/

关于html - CSS:如何做出正确的布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33279695/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com