html - 如何将 img 和 carousel 并排对齐，最大宽度为 1000px？

Question

我是初学者，在尝试对齐 img (#logo) 和 carousel (#my-slider) 时遇到了障碍 - 两者位于 #img-header。

在它们下面有一个导航栏和一些文本。该网站的最大宽度应该是 1000px(img 的宽度是 350px，carousel 的宽度是 630px，所以可能它们都在 1000px 以下)，但是当尝试对齐它们时，carousel 会跳到 Logo 下面.如果我尝试仅将旋转木马与导航栏和文本对齐，float:left 会起作用(如果我将最大宽度更改为 1060)但是，float:right 不会完全可以工作-无论我如何更改最大宽度，它都会向右移动。所有 3，导航栏，文本和 img-header 都应该同样宽。仅当我将 max-width 设置为 1880 时，img 和 carousel“同意”在同一行中，这也会使操纵杆偏向左侧而不是居中。我还尝试将 max-width 设置为 1000 并将 Logo 向左浮动，将旋转木马向右浮动，但它也不起作用 - 如果我将两者都 float 到同一侧，它也不起作用(例如, float:left;.

This is how the website is supposed to look like- with this in the center.

Demo of the website

HTML:

<div id="img-header">
    <img id="logo" src="logo/logo3.png" style="width:350px;height:240px"> 
    <div class="container">
        <div class"row">
            <div class="col-sm-12">
                <div id="my-slider" class="carousel slide" data-ride="carousel" style="width:630px;height:240px">

                    <!-- indicators, small dots -->
                    <ol class="carousel-indicators">
                        <li data-target="#my-slider" data-slide-to="0" class="active"></li>
                        <li data-target="#my-slider" data-slide-to="1"></li>
                        <li data-target="#my-slider" data-slide-to="2"></li>
                    </ol>

                    <!-- wrapper for slides -->
                    <div class="carousel-inner" role="listenbox">
                        <div class="item active">  
                            <img src="food/food1.jpg" alt="food 1">
                        </div>
                        <div class="item">  
                            <img src="food/food2.jpg" alt="food 2">
                        </div>
                        <div class="item">  
                            <img src="food/food3.jpg" alt="food 3">
                        </div>
                    </div>

                    <!--navigations/ next and prev buttons --> 
                    <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <!--<span class="sr-only">Previous</span>-->
                    </a>

                    <a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <!--<span class="sr-only">Previous</span>-->
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

#img-header {
max-width: 1060px ;
margin-left: auto ;
margin-right: auto ;   
}   


#logo {
float: left;
} 
 #my-slider {
float: left;
}
 #navbar {
max-width: 1000px ;
margin-left: auto ;
margin-right: auto ;
}
 ul {
list-style-type: none;
overflow: hidden;
background-color: #125ea3;
}
li {
float: right ;  
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #3594ff;
}
.active {
background-color: #3594ff;
}
.text {
max-width: 1000px ;
margin-left: auto ;
margin-right: auto ;
}
h1 {
text-align="center"
}
p {
text-align="center"
}

我知道我只是一个初学者，所以我可能犯了很多错误，请提前原谅我。

提前感谢您的所有帮助和建议!

Answer 1

你有概率:
我想我已经发现了你的一些主要问题。首先，您的 div.row 类声明有错别字(缺少 =“等号”)。

最大的问题是您的结构。我建议您进一步阅读 bootstrap 及其如何使用以下链接。

此外，我无法确定您的主要目标是关于响应度的，因此您有 3 个版本，它们都做不同的事情。如果我输入错误或忘记了什么，请告诉我。

---

这是我所做的:

我继续使用生成器(链接如下)重建您的 HTML 结构。我认为这没问题，因为您可能应该重新构建(是的，再次构建，如果您想了解其工作原理，请自行使用文档)无论如何都要重新构建布局 2 次。

---

演示:

• http://codepen.io/anon/pen/VjdRJK(版本 1)
• http://codepen.io/anon/pen/QExPmP(版本 2)
• http://codepen.io/anon/pen/PzaLwk(版本 3)

  ---

延伸阅读:

• > http://www.layoutit.com/build (二手发电机系统)
• > http://getbootstrap.com/css/#grid (请阅读此内容)
• > http://getbootstrap.com/customize/ (在这里自定义Bootstrap)
• Bootstrap 的快速分解(下)

  ---

Bootstrap 的快速分解:

Bootstrap 是一个非常漂亮的系统，但我经常看到它变得过于复杂并且此后使用不当。我认为如果我们简化有关 Bootstrap 实际是什么的事情，以便使问题更加清晰，那将会很有帮助。如果需要，我会写更多。

首先:

• Bootstrap 是一个框架:
  • 这意味着 Bootstrap 只是一个预制的基础结构，您的代码就是基于该结构构建的。
  • 这也意味着Bootstrap 旨在定制。此链接将向您显示:http://getbootstrap.com/customize/ (为了方便也放在列表中)
• 继续并单击该链接并注意“定制程序”的实际工作方式。它本质上是一个非常大的表格，您需要填写它来设置变量以适本地更改可下载包的内容。您会看到最开始的部分之一是各种复选框，您不仅可以更改它们的设置/格式等，还可以删除特定组件完全，例如jQuery 插件或Javascript 组件。
• Bootstrap 涵盖 HTML、CSS 和 Javascript

Consider this Analogy: it's best to use a concrete foundation to construct a building upon - although it's certainly possible to build a house without a rock-solid, ground-embedded concrete base of a foundation, it certainly won't adapt to & survive the future storms of obsoletion and changes to the land.

The meaning behind it: Not that it's impossible to create a great front-end presentation without them, but frameworks like Bootstrap totally rock. They address a multitude of potential issues and problems related to possibly unexpected results, they take care of a lot of the repeated, preamblic code, and they're incredibly flexible: able to be customized, reduced, enhanced, etc.

Often Overlooked: One hidden gem/benefit is that Bootstrap (much like every other widely-used framework/system, like Drupal, Magento, or Wordpress) inherently creates a reliably (usually) consistent set of standards that aren't only easy for (almost) everyone to adhere to (most without even knowing it) but are also easy for (almost) everyone to understand (like when debugging for others on StackOverflow).

这是关键:

Bootstrap 只是有一堆额外的东西:无论你在做什么，他们都不知道你到底需要什么，但他们做了一个很好的假设毫无疑问，它会包括 grid 系统、image 和一些 component 的使用，例如 jumbotron 或 callout。该选项由您自己决定，您在自定义 Bootstrap 下载中做什么(和)不包括什么。

就是这样。这些是基础知识。它没有什么疯狂的，除了一些奇妙的创新洞察力，由它的创造者提供。虽然它比您信任的 ol'e CSS Reset 和 CSS Normalize 处理的更多，但如果您将它当作 CSS Reset super 代码类固醇。

就是这样!