Question

我目前正在尝试创建一个对移动设备做出响应的表，但遗憾的是它并不是那么顺利。

我想要做的是下图：

所以我能够得到一个与Event和hr标签对齐的图像，并在夏天的夜晚进行对齐。但是，对于更多事件部分，我无法正确对齐事件，所以我认为一张桌子最好，但效果不佳。

我想知道如何修复以下html和我正在使用的CSS：

/*----- general styles -----*/
html, body { font-family: "OpenSans", sans-serif;background-color:#f9f9f9 }

media (min-width: 1170px){
	body { width: 1170px; margin-left: auto; margin-right: auto; }
	}
}
body { position: relative; }
h1, h2, h3 { font-family: "UrgeText", sans-serif; }
large, .large { font-size: 120%; }
.text-black { color: #000000; }
.text-gray { color: #888888; }
.bg-white { background-color: #FFFFFF;}
.bg-white1{background-color: #FFFFFF; height:auto;}/*07/15/2016*/
.bg-white2{background-color: #FFFFFF; height:214px;}/*07/15/2016*/
.hr{margin-top:-1px !important;}
.eventTop{margin-top:-14px;}
.margin-right { margin-right: 30px; }
.no-padding-right { 	padding-right:0; }
.no-padding-left { padding-left:0; }
.no-margin { margin: 0; }
.no-margin-right { margin-right: 0; }
.moreEventMargin{margin-top:-2px; margin-left:20px;}/*81px top*/
.buttonHome{margin-top:-12px; margin-left:380px; } /*-80px top*/
.btn-standard { 	
	border-color: #000;
	border-radius: 0;
	background-image: none;
}

/*07/15/2016*/
.image-padding{
	margin-top:34px;
	border:10px solid #f9f9f9;
}

/*07/15/2016*/
.featured{
	color:#337ab7;
}

/*For Doctor Finder shift address Address2 @ROB*/
.shiftAdd{margin-left:62px;}

.shiftAddUrgent{margin-left:80px;}

/*@ROB*/
.padding{
	padding-bottom:2px
}
/*@ROB* 06/15/2016*/
.ignore{

}


/*******************************************************/
/*07/07/2016 comment out padding-bottom*/
.navbarpadding {
  padding-bottom: 10px;
}

.navbarapp-padding{
  padding-bottom: 20px;
}

.body-padding{
	margin-top:70px;/*Note: This is for Mura. For production, we would need to see the actual results.*/
}

.finder-padding{
		margin-top:50px;/*Note: This is for Mura. For production, we would need to see the actual results.*/
}

/*07/07/2016 called container fluid to add the margin between navbar and body content*/


/*Full size of the calendar with no scroll bar 07/05/2016*/
/*.fullheight{
	margin-bottom:500px;
}
/*07/06/2016 To remove the particular height from calendar*/
/*.fc-scroller{
	height:auto !important;
}*/

/*07/11/2016 to increase the width of the background*/
/*.bg-white1{
	background-color:#FFFFFF;
	width:34.8%;
}*/

/*event mobile devices*/
@media(max-width:800px){
	.centerEvent{text-align:center;}
	.moreEventMargin{margin-top:16px; margin-left:29px;}/*0px top and left 57px*/
	.buttonHome{margin-top:-21px; margin-left:0px;}	
	.bg-white2{background-color: #FFFFFF; height: 0px;}
}

/*allows the scroller to appear on mobile version 07/11/2016*/
@media(max-width:480px){
	.fc-scroller{
		overflow-x:hidden !important;
		overflow-y: scroll !important;
		height:100px !important
	}
	/*07/15/2016*/
	.bg-white1{background-color: #FFFFFF; height:auto;}/*07/15/2016*/
	.centerEvent{text-align:center;}
	.moreEventMargin{margin-top:20px; margin-left:16px;}
	.buttonHome{margin-top:0px; margin-left:2px;}
}

.override-col-xs-2, .override-col-xs-10{
	float:right;
	min-height:1px;
}

/*Expand Events on home page 07/11/2016*/
@media (min-width:992px){
	.override-md-offset-3{
		width:3.5%; /*3%*/
	}
	.override-col-md-2{
		float:left;
		width:83.66666667%;
	}
	.paddingMore{margin-top:-90px; padding-left:220px;}
}

/*Change button color for slideshows override theme.min.css 07/05/2016*/
.btn-info1 {
  color: white;
  background-color: #5bc0de;
  border-color: #46b8da;
  background-image:-webkit-linear-gradient(top, #004377 0, #004377 100%);
  background-image:-linear-gradient(to bottom, #004377 0, #004377 100%);
  background-repeat:repeat-x;
  border-color:#00437;
}

.slideText{
	color:white;
}

/*Following is to center the 2016 copyright Regal ... footer*/
@media (min-width:1200px){
	.override-col-lg-6{
		width:63%;
		margin-left:252px;
	}
}

/*****************************************************/
/*override Theme.min.css file @ROB*/
.navbar .navbar-nav:not(.ignore){
	padding-bottom:10px;
	margin-left: 0;
    margin-right: 0;
}

.container-fluid.ng-scope:not(#home-content){
	padding-top:20px;
}

.break-all { word-break: break-all }

/*Added by Rob 05/13/2016*/
.calendarResize{width:100%;}

/*Added by Rob 05/31/2016*/
.fixIconCal{padding-left:0px;}

.fc-left h2{
	font-size:22px;
}

/*If we are going to use a style sheet Added by @Rob*/
@media print {
  .visible-print  { display: inherit !important; }
  .hidden-print   { display: none !important; }
}

@media (min-width: 450px){
	.has-margin-top { margin-top:20px; }
	.no-margin-top { margin-top:0; }
}

/*------ navbar.cfm, navbar_ap.cfm */

@media (min-width: 768px) {
	header { height: 120px; }
}

.absolute-position {
	position: absolute;
	top: 0; 
	left: 0;
	right: 0; 
	margin: 0 auto; 
}

@media (max-width: 480px){
	.fc-view-container{width:109%;}
	
/*07/08/2016 Added the following so title is visible*/	
	.visible-xs{
		display:block !important;
		margin-top:40px;
	}
	
/*07/08/2016 Added the following so adjust indicators*/
	.carousel-indicators{
		position: absolute;
		bottom: -1px;
		left: 50%;
		z-index: 15;
		width: 60%;
		margin-left: -30%;
		padding-left: 0;
		list-style: none;
	    text-align: center;
	}
}

@media (max-width: 639px){
	.company-logo { width: 210px; }
}

@media (min-width: 640px){
	.company-logo { width: 300px; }
}

@media (min-width: 768px){
	.company-logo { width: 400px; }
}

/*Added by Rob 05/13/2016*/
@media (max-width: 800px){
	.fc-view-container{width:94%;}
}

.navbar-toggle .icon-bar  { background: rgba(0,119,192,1); }

.navKeywords { border-right-style: none; }

.navKeywordsSubmit { 
	border-left-style: none;
	border-color: #000;
	}

.navbar { 
	border: 0; 
	box-shadow: none; 
}

.well { 
	background-color: initial; 
	background-image: none; 
	border: none; 
	box-shadow: none; 
	padding-left: 0; 
	padding-right: 0; 
}

.well .nav-list .nav-list a{	
	font-size: 90%;
} 
/*Added 06/15/2016 */
@media (max-width: 1023px){
	.navbar-opacity {
		/*background-color: rgb(255, 255, 255);*/
		background-color:#f9f9f9;
		background: rgba(255, 255, 255);
		/*background:#f9f9f9;*/
		filter: initial;
		/* For IE 8*/
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";
	}
	.navbar-opacity-home {
		background-color: rgb(255, 255, 255);
		/*background-color:#f9f9f9;*
		background:#f9f9f9;
		filter: initial;
		/*For IE 8*/
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";
	}
	/*Added by Rob. Fixed the issue with footer being cut off in tablet and mobile sites*/
	.col-lg-2{
		position: relative;
		min-height: 15px;
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media (min-width:1024px){
	.navbar-opacity { 
		/*background-color: rgb(0, 0, 0);*/
		background-color:#f9f9f9;
		/*background: rgba(255, 255, 255, .7);*/
		background: rgba(249, 249, 249, .7);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";
	}
	.navbar-opacity-home { 
		background-color: rgb(0, 0, 0);
		background-color:#f9f9f9;
		/*background: rgba(255, 255, 255, .7);*/
		background: rgba(249, 249, 249, .7);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";
	}
}



@media (min-width: 768px) {
	.navbar { background-image: none; }
	
}

@media (min-width: 768) and (max-width: 1024){
	.navbar-header .container {
		width: auto;
	}
}

/*display image in mobile devices for News/Events page @ROB*/
@media (max-width: 767px){
	.upcoming-events-image { 
	 max-width: 180px;
	 max-height: 180px;
	 width:95%;
	}
	
	.hidden-xs.col-md-2{
		display:inline !important;
	}
	.fc-scroller{
		overflow: visible !important;
		display:inline-block !important;
	 }
	.fc-scroller.fc-day-grid-container{
		height:auto !important;
	}
}

/*Fixes the icon calendar @ROB*/
@media(min-width: 968px){
	.icon-fix{
		margin-left:-15px;
	}
}

.navbar-nav > li > a { padding: 10px; }

@media (min-width: 1024px){
	#navPrimary li a:link
	, #navPrimary li a:visited { color: black; }
	
	#navPrimary li.active a:link
	, #navPrimary li.active a:visited { color: #0077C0; }
	
	#navPrimary li a:hover
	, #navPrimary li a:active{ color: #0077C0; }
	
	#navPrimary li.first a{ padding-left:0; }
	
	#navPrimary li.last a{ padding-right:0; }
	
	.nav>li>a:hover{ 
		text-decoration:underline;
		background-color:transparent 
	}
	
	.nav-tabs>li>a:hover{ border-color:initial }
	
	#navStandard ul.nav li a:link
	, nav#navStandard ul.nav li a:visited { color: #808080; }
	
	#navStandard ul.nav li a:hover
	, nav#navStandard ul.nav li a.active { color: #0077C0; }
	
	#navStandard ul.nav li a.active { font-weight: bold; }
	
	.navbar .navbar-nav>.active>a { 	
		background-color:transparent; 
		color: #0077C0;
	}
}

@media (max-width: 1023px){
	a.navbar-brand { padding-right: 0; }
}

.bw-button { 
		border: 1px solid rgb(0, 0, 0);
		color: rgb(0, 0, 0); 
		background-color: rgb(255, 255, 255);
	}

.radio-custom { display: none; }

.radio-label-custom {
	border: 1px solid rgb(0, 0, 0);
	margin: auto 1px;
	color: rgb(0, 0, 0); 
	background-color: rgb(255, 255, 255);
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 2px;
	padding-bottom: 2px;
	line-height: 95%;
	vertical-align: middle;
	text-align: center;
}
.radio-custom:checked + .radio-label-custom {
	color: rgb(255, 255, 255);
	background-color: rgb(0, 0, 0);
}

/*------ end navbar.cfm, navbar_ap.cfm */

/*----- home.cfm -----*/



#homepage .carousel { margin-top:auto; }

@media (min-width: 768px) {
	#homepage .carousel .item{ height:650px; }
	
	#homepage .carousel .carousel-caption { 
		left: 20px;
		top: 90px;
	}
}

@media (max-width: 767px){
/*07/08/2016 Modified #homepage .carousel .item { height: 200px; } and added margin-top:85px*/
	#homepage .carousel .item { 
		height: 200px; 
		margin-top:85px;
	}
	#homepage .carousel .item img { 
		max-width: 100%; 
		height: auto; 
		display: block; 
	}
	
	#homepage .carousel .carousel-caption { 
		left: 0;
		top: 35px;
		color: #0077C0;
	}
}

#homepage .carousel .carousel-caption { 
	background-color: transparent;
	text-align: left;
	}


@media (min-width: 1024px){
	#homepage .carousel .carousel-caption { 
		left: 10; 
		top: 160px;
		width: 500px;
	}

	.carousel-caption h1
	, .carousel-caption h2 *{ color: #0077C0 }
	
	#homepage .carousel .item img{
		<!-- [if IE 9]>
			top:200px;

			width: 100%;
		<![endif]-->
	}
	
	.slideHeader {
		font-size: 40px; 
		color: #0077C0; 
		font-family: "UrgeText"; 
	}
}

@media (min-width: 1170px){
	#homepage .carousel .carousel-caption { 
		left: 130px;
	}
}

/****************Carousel Expands. Carousel-caption and body content remains the same ROB*********************/
@media (min-width:1281px){
    #homepage .carousel .carousel-caption { 
        left:auto;
        right:auto;
        max-width:1263px;
        margin-left:70px;
    }
    .footer-links{
        margin:auto;
        max-width:1263px;
    }
    .bodyPages{
        margin:auto !important;
        max-width:1263px !important;
    }
    #searchForm{
        margin:auto !important;
        max-width:1263px !important;
    }
  /* body{
        /*max-width:1263px !important;
        margin:auto;
    }*/
	.depth-2 {
		margin: auto;
		max-width:1263px !important;
	}
	.depth-1{
		margin: auto;
		max-width:1263px !important;
	}
	/*.carousel-caption {
		max-width: 775.81px;
		margin: auto;
    }
	.row.item img{
		width:100%;
	}*/
}
/*********************************************************/

@media (min-width:1263px){
	body{
		overflow-x:hidden;
	}
}

#home-content { padding-left: 0; padding-right: 0 } 

.quickLink {
	/*border: 1pt solid black;*/
	padding-bottom: 10pt;
}



.upcoming-events-image { 
	max-width: 180px;
	max-height: 180px;
 }

 .expand-featured-event{
	 width:74%;
 }

#featured-event, #more-events { 
	margin-bottom: 20px;
	padding: 15px 0px;
}

@media (min-width: 1024px){
	#featured-event, #more-events{
		height: 214px;
		overflow: hidden;
	}
	
	#featured-event .featured-event-title {
		width: 170px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	#featured-event .featured-event-summary {
		width: 170px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/*----- end home.cfm -----*/


/*----- inc/footer.cfm ----*/

footer table{
	margin: 30px auto;
	border-collapse: separate;
    border-spacing: 20px 20px;
}

footer td {
	vertical-align: top;
}

.footer-links {
	margin-top: 20px;
	font-size: 12px;
}
/*Modified by Rob*/
/*.row {
  margin-left: 2px;
  margin-right: 2px;
}*/
@media (max-width: 1023px){
	#footer-affiliation { 
		background-color: #0077C0; 
		color: rgb(255, 255, 255); 
		padding: 5px;
	}
	
	#footer-affiliation a { color: rgb(255, 255, 255) }
}

@media (min-width: 1024px){
	.footer-column { margin-right: 20px }
}
.fc-time{display:none;}

<div class="centerEvent">
							<div class="hidden-xs override-col-md-offset-3 col-md-2  centerEvent" style="margin-left:30px">
								<p class="image-center upcoming-events-image image-padding"><img src="#local.item.getImageURL()#" alt="#HTMLEditFormat(local.item.getTitle())#"> </p>
							</div>
							<div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-2 bg-white1 expand-featured-event" id="featured-event">
							<table width="94%">
								<tbody>
									<tr>
										<td colspan="4">
											<h4 class="featured"><strong>FEATURED EVENT</strong></h4>
										</td>
									</tr>
									<tr>
										<td>
											<hr class="hr" />
										</td>
									</tr>
								</tbody>
							</table>
								<div class="eventTop">	
									<h6 class="ellipsis h6size"><!--- Title --->
										<div class="featured-event-title featured">
										<strong>#HTMLEditFormat(local.item.getValue('title'))#</strong>
										</div>
									</h6>											
										<small>
												<!--- date --->
												<!--- start date --->
												#LSDateFormat(local.item.getValue('displayStart'))#
													<!--- end date (if 'daily' event, and grouping is requested) --->
													<cfif YesNoFormat(arguments.groupDailyEvents)>
														<cfquery dbtype="query" name="subRS">
															select *
															from rs
															where rs.contentid = <cfqueryparam value="#local.item.getValue('contentid')#" />
														</cfquery>
														<cfif subRS.recordcount gt 1>
															<!--- end date --->
															<cfset enddate = ListLast(ValueList(subRS.displaystop)) />
															<cfif IsValid('date', enddate)>
																- #LSDateFormat(enddate)#
															</cfif>
														</cfif>
														<cfset local.listIDs = ListAppend(local.listIDs, local.item.getValue('contentid')) />
													</cfif>
										</small>
										<small>
												<!--- Summary --->
												<div class="featured-event-summary">
													<cfif Len(local.item.getValue('summary'))>
														#local.item.getValue('summary')#
													</cfif>
												</div>
											</small>
										<a href="##"><small>Learn more &gt;</small></a>
										<br />
								</div>
									<cfelse>
									<div class="paddingMore">
										<cfif ctr eq 2>
											<div class="col-xs-offset-1 col-xs-10 col-md-offset-0 override-col-md-2 moreEventMargin">
												<small><strong class="featured" style="margin-bottom:5px">MORE EVENTS</strong></small><br />
											</cfif>
												<div style="margin-top:5px">
													<small>#LSDateFormat(local.item.getValue('displayStart'))#</small><br />
													<small><strong>#HTMLEditFormat(local.item.getValue('title'))#</strong></small>
												</div>
												<br />
													</cfif>
												</cfif>
												<cfset ctr++ />
												</cfloop>
											</div>		
											<button class="btn btn-info btn-md resizable buttonHome centerEvent" type="button" onClick="parent.location='http://oc2-web03/regal_prod/index.cfm/news-events/events-calendar/'"><small>SEE ALL EVENTS &gt;</small></button><br />
									</div>
								</div>
					</div><!---closes the bg-white1 div--->

响应表没有响应

0 个答案: