Question

好的，所以我在自己的投资组合网站上工作，因为我是一名平面设计师。我有一个侧栏目前有一些我的网站的基本信息，它总是在那里。我想要的是我的“投资组合部分”在右边的旁边。我在两个单独的hmtl文件中创建了两个，所以我可以对它们进行微调，现在我想把“投资组合”代码粘贴到其他的html代码中，当我这样做的时候出现问题并将所有的css移到任何显示的位置。

过滤出现了，我可以把它放在正确的位置，但投资组合图像我不能出现。

这里是粘贴代码的地方，但似乎无法显示图片：https://jsfiddle.net/5g15jzwt/（过滤选择位于底部，它们应位于顶部）

这是我的设计，这是我想要的：http://imgur.com/a/96RlE

当我检查看到firbug的错误时，它说.container div和.portfoliolist div的高度为零。

.container { 
  position: relative; 
  width: 940px; 
  margin: 0 auto; 
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;  
 float: right;
 }

我希望有足够的信息来帮助，我似乎无法让其他页面在jsfiddle中工作，以显示我在哪里。如果您还需要其他任何帮助，请告诉我并了解我能做些什么。此外，我知道代码可以在某些地方有效地完成，我不是最好的只是尝试做

提前谢谢

Answer 1

目前，您的某些div尚未关闭，您只需打开它们即可。例如，您打开侧边栏，但从不关闭它。所以而不是：

<div id="sidebar">

<div id="header">
    <img id="logo" class="my-logo" src="images/logo.svg"/>
    <h1>Warren Breedlove</h1>
</div>

您可能想要这样做：

<div id="header">
    <img id="logo" class="my-logo" src="images/logo.svg"/>
    <h1>Warren Breedlove</h1>
</div>
<div id="sidebar">
    /* YOUR SIDEBAR CODE HERE */
</div> /* This closes the div */

了解如何使用div并确保它们不重叠：https://www.w3schools.com/tags/tag_div.asp

Answer 2

这是你的侧边栏和容器并排出现的小提琴，正如我想象的那样。

https://jsfiddle.net/0m67qu4z/2/

解决方案基于我对您原始问题的评论。对此CSS进行了许多不同的更改 - 全部是宽度值。最重要的是这些;

#sidebar{
 height: 720px;
 width: 25%; /* changed to % */
 background-color: #fbfbfb;
 position: relative;
 float: left;
}

#info {
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 border-radius:5px;             
 background:#fcf8e3;
 border:1px solid  #fbeed5;
 width:95%;  /* Changed to % */
 max-width:900px;
 margin:0 auto 40px auto;
 font-family: roboto;
 font-size:12px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
}

.container { 
position: relative; 
width: 70%; /*changed to %*/
margin: 0 auto; 
 margin-left:20px; /* gave you a little room between the two elements */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;    
float: left;  /*changed to float left */
}

/* #Tablet (Portrait) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
      width: 70%; /*changed to %*/
    }
 }

我忘记提到的其他事情是，如果你检查元素/ firebug你的代码 - 你的包装器显示为0 x 0.基本上它不会占用任何空间。如果你添加

wrapper {
  display:table;
}

它将正确分配您想要的宽度和高度。

Answer 3

这是一个flexbox解决方案。我正在使用一些伪代码而不是你的代码来帮助简化事情，并希望能够更容易地看到正在发生的事情。

body {
  display: flex;
  margin: 0;
  font-family: Arial, sans-serif;
}
ul,
li {
  margin: 0;
  padding: 0;
}
nav a {
  color: #555;
  text-decoration: none;
}
nav a:hover {
  color: indianred;
}
aside {
  display: flex;
  flex-direction: column;
  width: 250px;
  color: #777;
  font-weight: bold;
  text-transform: uppercase;
  background-color: white;
}
aside nav {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}
aside a {
  padding: 0.5rem 0 0.5rem;
}
aside p {
  margin-top: auto;
  font-size: 0.5rem;
  text-align: center;
}
section {
  flex-grow: 1;
  min-height: 1000px; /* <= for demo, mimic content height */
  padding: 0 2rem;
  background-color: #f1f1f1;
}
section nav {
  display: flex;
  align-items: stretch;
  height: 60px;
  border-bottom: 1px solid #ccc;
}
section nav a {
  padding: 0 1rem;
  line-height: 60px;
}
section nav a:hover {
  background-color: #ddd;
}

<aside>
  
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
  
  <p>Copyright ©</p>
  
</aside>

<section> 

  <header>
    
    <nav>
      <a href="#">All</a>
      <a href="#">Logos</a>
      <a href="#">School Work</a>
    </nav>
    
  </header>
  
  <main>
    <!-- place work example markup here -->
  </main>
  
</section>

让div位于我的侧边栏右侧

3 个答案: