1

这里的第一个问题。我正在尝试让 google now 卡片保持其宽度、相对于其他卡片的垂直位置以及相对于其内容的大小。像这样当窗口调整到足够小的时候压缩到一列。

我有这个，直到你有第三张卡，或者直到第二张卡的内容比第一张卡更多。

body {
    background-color: #f1f1f3;
    margin:auto;
}
h1 { 
    color:white;
    font-family:"Roboto";
    font-weight:100;
    font-size:36px;
}
h2 {
    font-family:'Roboto';
    font-weight:100;
    font-size:30px;
    color:#212121;
}
h4 {
    font-family:'Roboto';
    font-weight:400;
    font-style: italic;
    font-size:16px;
    color: #727272;
    border-top: 1px solid #727272;
    padding-top: 4px;
}
p {
    font-family:'roboto';
    font-weight:400;
    font-size:20px;
    color:#727272;
}
.content-link {
    color:#212121;
    text-decoration: none;
    font-weight:700;
}
.card-track {
    width:100%;
    height: auto;
    position:relative;
}
.card {
    width: 466px;
    margin: 15px;
    background-color:white;
    border-radius: 4px;
    float:left;
}
.card-color {
    width:466px;
    height: 96px;
    background-color: #395a66;
    position:absolute;
    border-radius: 4px 4px 0px 0px;
}
.card-icon {
    height: 46px;
    width:46px;
    margin: 25px;
    float:left;
}

.card-icon-img {
    max-height: 48px;
    height: auto;
    -webkit-filter: invert(100%);
}
.card-content-icon-img {
    max-height: 50px;
    height: auto;
    -webkit-filter: opacity(55%);
}
.card-color-title {
    margin:27px;
}
#gamingthronebar {
    background-color:#FFC107;
}
#colorbar {
    background-color:#673AB7;
}
.card-content {
    padding:100px 30px 20px 60px;
}
.card-content-icon {
    float:left;
    width:60px;
    height:60px;
    margin:120px 0px 0px 24px;
}
<link href='http://fonts.googleapis.com/css?family=Roboto:400italic,100,700,400' rel='stylesheet' type='text/css'>
<body>
<div class="card-track">
        <!-- Card
        <div class="card">
            <span class="card-color">
                <div class="card-icon"><img class="card-icon-img" src=""></div>
                <h1 class="card-color-title"></h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src=""></div>
            <div class="card-content">
                <p></p>
                <h4></h4>
            </div>
        </div><!--End Card-->
        <div class="card">
            <span class="card-color">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/verification24.png"></div>
                <h1 class="card-color-title">Hello, World!</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/android11.png"></div>
            <div class="card-content">
                <p>Take a look around this site, it's designed based upon the glorious look and feel of <a class="content-link" href="http://www.google.com/design/spec/material-design/introduction.html">Material Design</a>, a visual scheme designed by Google for use with Android 5.0 Lollipop. </p>
            </div>
        </div><!--End Card-->
        <div class="card">
            <span class="card-color" id="colorbar">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/good4.png"></div>
                <h1 class="card-color-title">No Java required</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/painter14.png"></div>
            <div class="card-content">
                
                <h2></h2>
                <p> Check it out! Right click > "Inspect Element"</p>
                <h4>Learn More</h4>
            </div>
        </div> <!--End Card-->
        <div class="card">
            <span class="card-color" id="gamingthronebar">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/gamingthronewhite.png"></div>
                <h1 class="card-color-title">Another cool project</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/memory1.png"></div>
            <div class="card-content">
                <p>This is a test of the emergency broadcast system.</p>
                <h4>This is a link</h4>
            </div>
        </div><!--End Card-->
        <div class="card">
            <span class="card-color">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/round58.png"></div>
                <h1 class="card-color-title">About the designer</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/create3.png"></div>
            <div class="card-content">
                <p>I'm no one of consequence. But if you must know, I like Material Design. This website is a work in progress, but it's my best shot.</p>
                <h4>Professional Version</h4>
            </div>
        </div><!--End Card-->
    </div><!--End card track-->
  </body>

这在很大程度上有效，但卡片的高度由下一列中的卡片决定，这很接近，但我希望卡片由其上方的高度决定。

body {
    background-color: #f1f1f3;
    margin:auto;
}
h1 { 
    color:white;
    font-family:"Roboto";
    font-weight:100;
    font-size:36px;
}
h2 {
    font-family:'Roboto';
    font-weight:100;
    font-size:30px;
    color:#212121;
}
h4 {
    font-family:'Roboto';
    font-weight:400;
    font-style: italic;
    font-size:16px;
    color: #727272;
    border-top: 1px solid #727272;
    padding-top: 4px;
}
p {
    font-family:'roboto';
    font-weight:400;
    font-size:20px;
    color:#727272;
}
.content-link {
    color:#212121;
    text-decoration: none;
    font-weight:700;
}
.card-track {
    width:100%;
    height: auto;
    position:relative;
    text-align: center;
}
.card {
    width: 466px;
    margin: 15px;
    background-color:white;
    border-radius: 4px;
    display:inline-flex;
    text-align: left;
}
.card-color {
    width:466px;
    height: 96px;
    background-color: #395a66;
    position:absolute;
    border-radius: 4px 4px 0px 0px;
}
.card-icon {
    height: 46px;
    width:46px;
    margin: 25px;
    float:left;
}

.card-icon-img {
    max-height: 48px;
    height: auto;
    -webkit-filter: invert(100%);
}
.card-content-icon-img {
    max-height: 50px;
    height: auto;
    -webkit-filter: opacity(55%);
}
.card-color-title {
    margin:27px;
}
#gamingthronebar {
    background-color:#FFC107;
}
#colorbar {
    background-color:#673AB7;
}
.card-content {
    padding:100px 30px 20px 60px;
}
.card-content-icon {
    float:left;
    width:60px;
    height:60px;
    margin:120px 0px 0px 24px;
}
<link href='http://fonts.googleapis.com/css?family=Roboto:400italic,100,700,400' rel='stylesheet' type='text/css'>
<body>
<div class="card-track">
        <!-- Card
        <div class="card">
            <span class="card-color">
                <div class="card-icon"><img class="card-icon-img" src=""></div>
                <h1 class="card-color-title"></h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src=""></div>
            <div class="card-content">
                <p></p>
                <h4></h4>
            </div>
        </div><!--End Card-->
        <div class="card">
            <span class="card-color">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/verification24.png"></div>
                <h1 class="card-color-title">Hello, World!</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/android11.png"></div>
            <div class="card-content">
                <p>Take a look around this site, it's designed based upon the glorious look and feel of <a class="content-link" href="http://www.google.com/design/spec/material-design/introduction.html">Material Design</a>, a visual scheme designed by Google for use with Android 5.0 Lollipop. </p>
            </div>
        </div><!--End Card-->
        <div class="card">
            <span class="card-color" id="colorbar">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/good4.png"></div>
                <h1 class="card-color-title">No Java required</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/painter14.png"></div>
            <div class="card-content">
                
                <h2></h2>
                <p>There was lots of java involved in the making of this website, but there's none in this website. Check it out! Right click > "Inspect Element"</p>
                <h4>Learn More</h4>
            </div>
        </div> <!--End Card-->
        <div class="card">
            <span class="card-color" id="gamingthronebar">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/gamingthronewhite.png"></div>
                <h1 class="card-color-title">Another cool project</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/memory1.png"></div>
            <div class="card-content">
                <p>This is a test of the emergency broadcast system.</p>
                <h4>This is a link</h4>
            </div>
        </div><!--End Card-->
        <div class="card">
            <span class="card-color">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/round58.png"></div>
                <h1 class="card-color-title">About the designer</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/create3.png"></div>
            <div class="card-content">
                <p>I'm no one of consequence. But if you must know, I like Material Design. This website is a work in progress, but it's my best shot.</p>
                <h4>Professional Version</h4>
            </div>
        </div><!--End Card-->
    </div><!--End card track-->
  </body>

有什么想法吗？该网站显然有更多内容，但这是我目前正在努力解决的主要问题。

4

0 回答 0